d3js学习——3.数据连接

数据连接的主要目的是：使用给定的数据集映射现有文档的元素。

它根据给定的数据集创建文档的虚拟表示，并提供使用虚拟表示的方法。

示例

对于下面的html，使用 selectAll() 方法和 data() 方法将它映射到 li 元素中

<ul id="list">
    <li></li>
    <li></li>
</ul>

d3.select("#list")
    .selectAll("li")
    .data([10, 20, 25, 34, 12])
    .text(function (d) {
      // text（）方法中的函数用于获取li元素映射数据
      return d;
    })
    .enter()  // 提供对剩余数据的访问
    .append("li")  // 创建新元素
    .text(function (d) {
      return "this is " + d;
    });

// 从数据集中动态删除数据项
d3.selectAll("li")
    .data([20, 25, 34, 12])
    .exit()
    .remove();

数据连接的四种处理数据集的方法

datum()

为html文档中的单个元素设置值

// 将50映射到p标签
d3.select("p")
    .datum(50)
    .text(function (d) {
      return d + " is assigned";
    });
// 将100映射到div标签新建的h2标签中
d3.select("div")
    .datum(100)
    .append("h2")
    .text(function (d) {
      return d + " is assigned";
    });

data()

将数据集分配给HTML中的元素集合

d3.select("#list")
    .selectAll("li")
    .data([10, 20, 25, 34, 12])
    .text(function (d) {
      // text（）方法中的函数用于获取li元素映射数据
      return d;
    })

exter()

输出之前没有图像元素的数据项集

exit()

输出不再存在的图像元素集

text()

可以将匿名函数作为参数，此匿名函数获取相应的数据和使用data()方法分配数据集的索引

.text(function(data,index){
    console.log(data); // 传过来的数据
    console.log(index); // 数据的索引
    return d; // 将元素映射到相应位置
})