D3是用于数据可视化的Javascript库。使用SVG,Canvas和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。
D3与JQuery的区别 D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素;但是使用D3 时我们需要通过D3专有的data(),enter()和exit()方法提供数据和回调,然后D3操作元素。 D3通常用于数据可视化;JQuery用于创建Web应用。D3有很多数据可视化扩展;JQuery有很多Web应用插件。两者都是Javascript DOM操作库,提供CSS选择器和流畅的API。
What is the difference between D3 and JQuery?
最常用的方法
d3.select(selector):选择第一个匹配selector的元素。如果没有匹配的元素,返回一个空的选择(但不是null或undefined)。
d3.selectAll(selector):与select()不同的是,会选择所有匹配的元素。
selection.append(type):如果指定的type是一个字符串,则将这个type(标签名称)作为新元素附加到每个选定元素的最后一个子元素。
selection.attr(name,[value]):value确定时,将selection中名为name的属性值设置成value。value可以为常量或者方法。如果value没有给出,返回selection中第一个非空元素的name属性当前值。
selection.data([data[,key]]):将数据和元素绑定起来,并返回一个新的selection。
selection.enter():返回enter selection。此时DOM元素少于对应的数据。用于添加缺少的DOM元素。比如:
如果body是空的,上面的代码就会根据数据创建新的div元素,然后添加到body元素中,并将文本内容设置为对应的数字。页面结果如下: