D3常用的简单的API记录

D3常用简单API记录

1、选择元素

selset()返回匹配选择器的第一个元素

selectAll() 返回匹配选择器的所有元素

2、选择集

定义：d3.select()和d3.selectAll()返回的对象称为选择集(selection)。

2-1 查看选择集状态：

selection.empty() 如果选择集为空就返回true，否则返回false。

selection.node() 返回第一个非空元素，如果选择集为空，返回null。

selection.size() 返回选择集中的元素的个数。

2-2 设定和获取属性：

selection.attr(name [,value]) 设置或获取选择集的属性，name是属性名称，value是属性值。

selection.classed(name [,value]) 设置或获取选择集的CSS类，name是类名，value是一个布尔值，表示该类是否开启。

selection.style(name [,value])设定或获取选择集的样式,name是样式名，value是样式值。

selection.property(name [,value]) 设定或获取选择集的属性，name是属性名，value是属性值，区别于attr()有的属性不能设定和获取，典型的就是文本输入框的value属性。

selection.text([value]) 设定或获取选择集的文本内容，如果省略value，则返回当前文本内容，文本内容相当于innerText,不包括元素内部的标签。

selection.html([value]) 设定或获取选择集的内部HTML内容，相当于DOM的innerHTML,包括元素内部的标签。

2-3 添加、插入、删除

selection.append(name) 在选择集的末尾添加一个元素，name为元素的名称。

selection.insert(name [,before]) 在选择器的指定元素之前插入一个元素，name是被插入元素的名称，before是CSS选择器名称。

selection.remove() 删除选择集中的元素。

2-4 数据绑定

selection.datum([value]) 选择集中的每一个元素都绑定相同的数据value。

selection.data(values [,key]) 选择集中的每一个元素分别绑定数组values的每一项，key是一个键函数，用于指定绑定数组时对应的规则。

在给元素绑定数据时，若果出现绑定的元素和数组长度不一样的情况分析：

update : 数组长度 = 元素数量 , 如果数组的长度大于元素数量，则绑定数据的元素”即将被更新(update)”

enter : 数组长度 > 元素数量 , 如果数组的长度大于元素数量，则部分还不存在的元素”即将进入可视化(enter)”

exit : 数组长度 < 元素数量 , 如果数组的长度小于元素数量，则多余的元素”即将退出可视化(exit)”

2-5 选择集的处理

enter() : 选择一个空集，然后使用enter().append()的形式来添加足够数量的元素。

示例：

     var arr = [1,2,3,4,5];
     var body = d3.select("body"); 
     body.select("p") // 选择body中的所有p,但是没有p，所以得到的是一个空集
        .data(arr)    // 绑定数组arr
        .enter()      // 返回enter部分
        .append("p")  // 添加p元素
        .text(function(d){
            return d;
        })；

示例2：

不需要考虑p元素是多余还是不足，无论任何情况，最终的结果都是一个p元素对应数组中的一个项，没有多余的。

    var arr2 = [10,20,30];
    var p = d3.select("body").selectAll("p");

    var update = p.date(arr2); // 绑定数据后，分别返回update\enter\exit部分
    var enter = update.enter();
    var exit = update.exit();

    update.text(function(d){ // update部分的处理方法
        return d;
    });
    update.append("p").text(function(d){ // enter部分的处理方法
        return d;
    });
    exit.remove(); // update部分的处理方法

后续不断学习中….