D3.js 方法的区别

selection.classed(className[, value]) 与 selection.attr('class', className)

这两上方法都可以给选择集添加类,它们的区别是selection.classed 后面可以设一个布尔值,表示这个类是否开启。 这在需要根据条件来切换类的时候特别管用,如:

var isOpen = false;
d3.select('p').classed('open', isOpen)

seleciton.attr 与 selection.property

selection.property可以获取一些selection.attr获取不到的属性值,如input的value属性,此属性不会在标签中显示。

<input id='fname' type='text' name='fname' />

seleciton.datum 与 selection.data

seleciton.datum是对选择集所有元素都设置一个值,selection.data则会根据data里的索引来对应赋值

var a = [1,2,3,4,5]

d3.selectAll('p').datum(a) // 对于匹配的所有p标签都会绑定一个数据为a的值
d3.selectAll('p').data(a)  // 匹配的第一个p绑定1,第二个p绑定2...
D3 demo
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。