【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

最新推荐文章于 2019-06-27 20:24:29 发布

VIP文章 DecemberCafe

最新推荐文章于 2019-06-27 20:24:29 发布

阅读量1w

点赞数 3

分类专栏： D3.js D3 数据可视化 - 进阶系列文章标签： d3 选择集数据 datum 绑定

本文链接：https://blog.csdn.net/lzhlzz/article/details/42642847

版权

选择集和数据的关系是 D3 最重要的基础，在【入门 - 第 7 章】时进行过些许讲解，对于要掌握好 D3 是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下来一段时间里会有多篇此类文章。

D3 最大的特色就是能够将数据绑定到DOM上。使用select或selectAll选择元素之后，被选择的元素上是没有数据的。数据绑定就是使被选择元素里包含有数据。与此相关的函数有两个：

datum()：将指定数据赋值给被选择元素。
data()：将数据数组与选择集的元素结合。

上面的概念可能难以理解，不要着急，接下来依次剖析datum()和data()，来看看数据绑定是如何工作的，它们又有什么不同之处。虽然不理解原理也可直接使用这两个函数，但遇到意料之外的结果时往往会不知道如何调试，无从下手，因此大致知道其工作过程是必要的。

datum()的工作过程

datum() 绑定数据的方法很简单，在 D3 中使用较少，但能帮助你理解数据 D3 是如何绑定数据的。请先看下面的代码：

<body>
<!-- 三个段落元素 -->
<p>Fire</p>
<p>Water</p>
<p>Wind</p>

<script>
//选择body中所有的p元素，选择集结果赋值给变量p
var p = d3.select("body").selectAll("p");

//绑定数值7到选择集上
p.datum(7);

//在控制台输出选择集
console.log(p);
</script>
</body>

这段代码中，使用datum()将数值7绑定到了选择集上，然后在控制台输出该选择集。在浏览器的控制台中，可以看到如图1所示的输出结果。其中包含有三个p元素，正是使用selectAll选择的三个段落&

最低0.47元/天解锁文章

DecemberCafe

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础，在【入门 - 第 7 章】时进行过些许讲解，对于要掌握好 D3 是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下来一段时间里会有多篇此类文章。
复制链接

扫一扫