d3之操作元素

selection.(api)列表

1.selection.attr() 设置或者获取属性。
获取属性--selection.attr('属性名');
设置属性--selection.attr('属性名', '属性值') 。

2.selection.classed() 新增，删除或是更新类名
新增类名--selection.classed('foo bar', true);
删除类名--selection.classed('foo', false)。

3.selection.style()获取或设置样式值。
设置样式selection.style('color','red');
获取样式selection.style('color'),如果选择器为多个，默认获取第一个选中元素的颜色。

d3.select("#d1")
      .selectAll("p")
      .datum(function(){
                return ['red', 'blue', 'yellow']
          })
      .text("Hello World")
      .style("color",function(d, i){//此处的i为，选中元素的DOM的索引。
            return d[i]; 
          });

4.selection.property()设置或获取某些HTML特有的属性，比如form表单类的，input的value属性，checkbox的checked属性。
获取属性--selection.property('value');
设置属性--selection.property('value', 'hello')。

5.selection.text()设置或获取文本。
获取文本--selection.text();
设置文本--selection.text('hello')。

6.selection.html()设置或获取HTML。
获取HTML元素--selection.html();
设置HTML元素--selection.html('<h1>hello</h1>')。

7.selection.append()从后面插入元素。

8.selection.insert()从前面插入元素。

9.selection.remove()移除元素。

10.selection.clone()克隆元素，包括深克隆与浅克隆。深克隆将克隆所有的后代元素，浅克隆只克隆选择的元素本身,不填，默认为浅克隆。
深克隆--selection.clone(true);
浅克隆--selection.clone(false)。

11.selection.sort(value)。value>0 升序排列，value<0降序排列。