【d3.js-01】selection

d3.select()：可使用string或者node节点，d3.selectAll()选取多个元素，返回selections

let selections=d3.selectAll("p")
    .attr("class","graf")
    .style("color","red")

Selection

1. selection.select：选择每个选中元素的后代元素(string || 函数)
2. selection.selectAll：选取多个后代元素

//选择每个P元素的前一个同胞节点，this指向当前DOM元素(nodes[i])
let previous=d3.selectAll("p").select(function(d,i,nodes){
    return this.previousElementSibling
})

3. selection.clone(deep)
   • 克隆当前选择集并添加到当前选择集后边
   • deep：true深度克隆(递归克隆子孙节点)，默认false
   • 等价于：

selection.select(function(){
    return this.parentNode.insertBefore(this.cloneNode(deep),this.nextSibling)
})

4. selection.attr()
   • 获取或者设置属性的值，设置为null,表示移除属性
   • d --对应的数据
   • i --数据的索引
   • nodes -- 父元素

d3.select('#container')
    .attr('class', function (d, i, nodes) {
         console.log(d, i, nodes, this);
         return this.className;
      })

5. selection.size()：返回选择集中的元素个数
6. selection.empty()：返回选择集是否为空

Joining Data

1. selection.data()：将一个数组绑定到选择集上，数据各项和选择集个元素绑定，一一对应
2. selection.datum()：将一个数据绑定到所有选择集上
3. selection.enter()
   • 当DOM数量少于data的数量(甚至没有)时，我们希望程序帮我们创建，
   • enter()会选择缺少的那部分DOM元素，之后配合append()来进行DOM元素的实际创建

d3.selecteAll("p").data([1,2,3]).enter().append("p");

4. selection.exit()
   • exit()是来选择那些与数据相比多出来的DOM元素
   • 接着可以使用.remove()来移除这些元素

d3.selectAll('p').data([1,2,3]).exit().remove();