您的位置：首页 > Web前端 > JavaScript

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

2016-05-11 15:59 260 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航