d3.js常用方法

d3.js常用方法

1、选择单个元素

d3.select(selector)

类似于js中的document.querySelector()方法，都是用于获取DOM元素；其中selector可以是标签名称、类名、id名；例如：获取body元素

d3.select(body)

2、选择所有元素

d3.selectAll(selector)

类似于js中的document.querySelectorAll()方法，都是用于获取DOM元素；其中selector可以是标签名称、类名、id名；例如：获取所有的p标签元素

d3.selectAll(p)

以下所有的selection均表示利用d3.js选择器选中的元素或者新创建的元素

3、添加属性

selection.attr(name[, value])

一个参数为属性名，第二个参数为属性值，例如：新增一个<a>标签，并设置连接地址和跳转方式：

selection.append("a")
  .attr("xlink:href", "https://www.baidu.com")
  .attr("target", "new")

4、添加css类

selection.classed(name[, value])

第一个参数为类名，可以是单个也可以是多个，例如："foo"、"foo bar"；第二个参数表示是否为选中的元素添加类，可以直接是布尔值、也可以是返回布尔值的函数，例如：true、() => Math.random() > 0.5；

5、添加事件

selection.on(name[, listener [, options]])

第一个参数表示要添加的事件名，第二个参数是事件对应的回调，对于第三个参数，最常用的就是用于表示是在事件捕获节点还是冒泡阶段执行回调函数，它与addEventListener方法相似；例如：给类名为foo的标签添加一个点击事件：

d3.select('.foo')
  .on('click', handleClick)

function handleClick(e){
 // TODO
}