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

最新推荐文章于 2021-08-02 08:43:56 发布

AryaoO

最新推荐文章于 2021-08-02 08:43:56 发布

阅读量2.8k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： datum data enter update exit

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51371978

版权

前端开发基础同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

前端开发——D3

33 篇文章 4 订阅

订阅专栏

一、使用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>

可以将其输出在控制台看到：

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所示：

绑定数据的代码如下：

//定义数组  
var dataset = [3, 6, 9];  
  
//选择body中的p元素  
var p = d3.select("body").selectAll("p");  
  
//绑定数据到选择集  
var update = p.data(dataset);  
  
//输出绑定的结果  
console.log(update);

绑定后在控制台的输出结果如下：

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）所示：

图（1）

图（2）

可以看到enter部分中，D3已经为多余的数组项12和15预留了位置，用于将来的操作。enter部分中还有一个update变量，指向update部分。本次绑定中，没有多余的元素，所以exit中没有内容。如果将数组换成：

var dataset = [3];

则exit部分的输出结果如图（3）所示，可以看到多出的两个p元素。

图（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>

结果则如下：

3 : 王五
6 : 张三
9 : 李四

可以看到，结果并没有按照新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();

AryaoO

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
d3.js——选择集与数据的绑定

一、使用datum（）绑定数据 Fire Water Wind var p = d3.select("body").selectAll("p"); p.datum("Thunder") //绑定字符串Thunder到选择集上 .text(f
复制链接

扫一扫