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节点