D3学习记录

 

 

 

https://d3js.org/
http://www.graphvis.cn/
https://iowiki.com/d3js/d3js_quick_guide.html
https://www.cnblogs.com/fastmover/p/7779660.html
https://wiki.jikexueyuan.com/project/d3wiki/author.html
https://juejin.cn/post/6844903571654180878
https://javascript.ruanyifeng.com/library/d3.html
https://www.bookstack.cn/read/d3wiki/pie.md
https://www.bloghome.com.cn/post/shi-yong-javascripthe-d3-jsshi-xian-shu-ju-ke-shi-hua.html
https://www.yiibai.com/code/cate/1200
https://github.com/xswei/d3js_doc

SVG,指可缩放矢量图形(Scalable Vector Graphics)

D3.js - Data Join
数据连接方法
数据连接提供以下四种方法来处理数据集 -

datum()
data()
enter()
exit()
// Update…
var p = d3.select("body") // 直接把数据绑定到Dom并输出,数组元素个数与p节点的个数一致就全部更新文本,如果不一致,就只更新现有p节点的文本,多余的数据会被保存起来,看下面会用到
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

// Enter…[常用]
p.enter().append("p") // 如果不一致,数组元素个数比p节点多,就插入p节点补足并相应更新文本
    .text(function(d) { return d; });

// Exit…[常用]
p.exit().remove(); // 如果不一致,数组元素个数比p节点少,就删除多余的p节点

 

posted @ 2021-09-08 14:15  DarJeely  阅读(65)  评论(0编辑  收藏  举报