D3.js使用简书

d3.js 是一个可以基于数据来 *** 作文档的 JavaScript 库，可以帮你使用HTML CSS JS SVG Canvas 来展示数据，它结合强大的视图组件来驱动Dom *** 作.

d3引入的使用

也可以单独使用某个模块，比如单独使用d3-selection

可以模块化引入

Selections 允许强大的数据驱动文档对象模型(DOM)：设置attributes,styles,HTML 或 text 内容，选择集的方法通常选择当前的选择当前的选择集或者新的选择集，因此允许进行链式调用。

等价于：

选中符合条件的第一个元素，选择条件为 selector 字符串。如果没有元素被选中则返回空选择集，如果选择器有多个，那就返回匹配第一个选择集

选择所有与制定的selector匹配的元素，返回一个数组。如果没有元素被选中，则返回的空的选择集。

视图移动以及缩放是一种流行的交互技术 缩放行为通过 d3-zoom 模块来实现，缩放本身与DOM元素无关，可以用于SVG，HTML 或者 Canvas。

创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数，通过selection.call()来应用到元素本身上

事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放

这是不可以的。在 body 中 id 为 myid 的元素前添加一个段落元素。

body.insert("p","#myid")

.text("insert p element")

已经指定了 Pear 段落的 id 为 myid，因此结果如下。

Apple 

insert p element 

Pear 

Banana

删除元素使用 remove，例如：

var p = body.select("#myid")

p.remove()

如此即可删除指定 id 的段落元素。

---