d3.js——选择集与数据的绑定

一、使用datum()绑定数据

<body>  
        <p>Fire</p>  
        <p>Water</p>  
        <p>Wind</p>  
        <script>  
        var p = d3.select("body").selectAll("p");  
        p.datum("Thunder")      //绑定字符串Thunder到选择集上  
          .text(function(d,i){  //替换内容  
                return d + " " + i;  
          });  
        </script>  
</body>  
可以将其输出在控制台看到:
d3.js——选择集与数据的绑定_第1张图片
datum() 对于选择集中的每一个元素,都为其增加一个__data__属性,属性值为datum(value)的参数value。此处的value并非一定要是number(数值)型,也可以是string(字符串)、boolean(布尔型)和object(对象),无论是什么类型,其工作过程都是给__data__赋值。如果使用undefined和null作为参数,则将不会创建__data__属性


二、使用data()绑定数据

首先我们来看一下data()与datum()的区别:
      data()与datum()都只是纯粹地将元素它的值与选择集绑定在了一起,但是如果想要在浏览器上看到文本效果,还需要调用text()来替换字符串,并展示出来。区别:假设要绑定的数组为[3,6,9],那么我们希望第一个p元素绑定3,第二个绑定6,第三个绑定9。这种情况就需要使用data()函数,如果使用datum(),则会将数组本身绑定到各元素上,即第一个p元素绑定[3,6,9],第二个绑定[3,6,9],第三个也是绑定[3,6,9],其区别如图1所示:
d3.js——选择集与数据的绑定_第2张图片
绑定数据的代码如下:
//定义数组  
var dataset = [3, 6, 9];  
  
//选择body中的p元素  
var p = d3.select("body").selectAll("p");  
  
//绑定数据到选择集  
var update = p.data(dataset);  
  
//输出绑定的结果  
console.log(update);  
绑定后在控制台的输出结果如下:
d3.js——选择集与数据的绑定_第3张图片
data()函数返回一个对象,对象里包含update部分和两个函数。一个是enter()函数,返回enter部分,一个是exit()函数,返回exit部分。请看如下代码:
var dataset = [3, 6, 9, 12, 15];  
var p = d3.select("body").selectAll("p");  
var update = p.data(dataset);  
console.log(update);  
console.log(update.enter());  
console.log(update.exit());  
这段代码中,数组长度为5,元素数量为3,多出两个数组项。其输出结果如图(1)和(2)所示:
d3.js——选择集与数据的绑定_第4张图片
图(1)

d3.js——选择集与数据的绑定_第5张图片
图(2)
可以看到enter部分中,D3已经为多余的数组项12和15预留了位置,用于将来的操作。enter部分中还有一个update变量,指向update部分。本次绑定中,没有多余的元素,所以exit中没有内容。如果将数组换成:
var dataset = [3];  
则exit部分的输出结果如图(3)所示,可以看到多出的两个p元素。
d3.js——选择集与数据的绑定_第6张图片
图(3)
data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推。也可以不按照此顺序进行绑定,这就要用到data()的第二个参数。这个参数是一个函数,称为键函数(key function):
<body>  
<!-- 三个空的p元素 -->  
        <p></p>  
        <p></p>  
        <p></p>  
        <script>  
//数据  
        var persons = [ { id: 3 , name:"张三" },  
                            { id: 6 , name:"李四" },  
                                { id: 9 , name:"王五" }];  
  
//选择body中的所有的p元素  
        var p = d3.select("body").selectAll("p");  
  
//绑定数据,并修改p元素的内容  
        p.data(persons)  
            .text(function(d){  
                return d.id + " : " + d.name;  
            });  
        </script>  
    </body>  
结果如下:
3 : 张三 
6 : 李四  
9 : 王五 
下面将persons里的数据更新,再绑定一次数据。本次绑定添加键函数:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择集与数据绑定</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
<script src=" d3.js"></script>
<script>
    persons = [     { id: 6 , name:"张三" },
        { id: 9 , name:"李四" },
        { id: 3 , name:"王五" }];

    var p = d3.select("body").selectAll("p")
    p.data(persons, function(d){return d.id })
            .text(function(d){
                return d.id + " : " + d.name;
            });
</script>

</body>
</html>
结果则如下:
  1. <p>3 : 王五</p>  
  2. <p>6 : 张三</p>  
  3. <p>9 : 李四</p> 
可以看到,结果并没有按照新persons数组的次序(6:张三、9:李四、3:王五)排列。绑定过程如图1所示,绑定的顺序不按照索引号绑定,而是使 值依次对应。

三、update、enter、exit的处理模板

var dataset = [10, 20, 30];  
var p = d3.select("body").selectAll("p");  
          
        //绑定数据后,分别返回update、enter、exit部分  
        var update = p.data(dataset);  
        var enter = update.enter();  
        var exit = update.exit();  
          
        //1.update部分的处理方法  
        update.text( function(d){ return d; } );  
          
        //2.enter部分的处理方法  
        enter.append("p")  
            .text( function(d){ return d; } );  
          
        //3.exit部分的处理方法  
        exit.remove();  


你可能感兴趣的:(update,enter,Data,exit,datum)