javascript – d3.each()索引不是从0开始
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – d3.each()索引不是从0开始，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3151字，纯文字阅读大概需要5分钟。
内容图文
我的问题非常类似于this.解决方案是有一个< div>搞砸了.没有< divs>在我的.
我有这个CoffeeScript代码：
data = [0, 1, 2, 3, 4]
d3.select("body")
.data(data)
.enter()
.each((d, i) =>
console.log(i, d)
)
使用所需的控制台输出：
0 0
1 1
2 2
3 3
4 4
实际的控制台输出是：
1 1
2 2
3 3
4 4
我可以使用以下代码获得所需的输出：
data = [0, 1, 2, 3, 4]
d3.select("body")
.data(data)
.each((d, i) =>
console.log(i, d)
).enter()
.each((d, i) =>
console.log(i, d)
)
但是有两个.each()调用只是感觉不对.
解决方法:
d3.each()确实从索引0开始.您在代码中看到的是预期的行为,给定代码中的内容.
这里的问题很简单：有一个< body>当然,页面中的元素.您的数据数组有5个元素,其中一个元素绑定到< body>.
让我们来看看.看看“输入”选择的大小：
data = [0, 1, 2, 3, 4]
var foo = d3.select("body")
.data(data)
.enter();
console.log("Size of enter selection: " + foo.size())<script src="https://d3js.org/d3.v4.js"></script>我们还可以显示数组中的第一个元素绑定到< body>：
data = [0, 1, 2, 3, 4]
var foo = d3.select("body")
.data(data)
.enter();
console.log("Data of body: " + d3.select("body").data())<script src="https://d3js.org/d3.v4.js"></script>另一种显示方法是使用第三个参数(技术上讲,参数),它是当前组：
data = [0, 1, 2, 3, 4]
d3.select("body")
.data(data)
.enter()
.each((d, i, p) =>
// ^---- this is the third argument
console.log(p)
)
在这里,我无法提供有效的Stack片段,因为如果我们尝试记录D3选择它会崩溃.但结果将是这样的：
[undefined × 1, EnterNode, EnterNode, EnterNode, EnterNode]
未定义的是“更新”选择(正文),4个EnterNodes是“输入”选择.这让我们解释了为什么每个()在代码中的行为方式.
如果你看一下源代码……
function(callback) {
for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
if (node = group[i]) callback.call(node, node.__data__, i, group);
}
}
return this;
}
您将看到它将节点与组进行比较是有效的,您的组包含“更新”选择和“输入”选择.更新选择对应于索引0,输入选择对应于索引1,2,3和4.
解：
这就是你想要的,注意selectAll和null：
data = [0, 1, 2, 3, 4]
d3.select("body")
.selectAll(null)
.data(data)
.enter()
.each((d, i) =>
console.log(i, d)
)<script src="https://d3js.org/d3.v4.js"></script>因此,如您所见,选择null可确保我们的“输入”选择始终包含数据数组中的所有元素.
奖励：选择并选择所有行为不同.大多数人认为唯一的区别是前者只选择1个元素而后者选择所有元素.但是有更微妙的差异.看看这张表：
+------------------+----------------------------------+----------------------------+
| Method | select() | selectAll() |
+------------------+----------------------------------+----------------------------+
| Selection | selects the first element | selects all elements that |
| | that matches the selector string | match the selector string |
+------------------+----------------------------------+----------------------------+
| Grouping | Does not affect grouping | Affects grouping |
+------------------+----------------------------------+----------------------------+
| Data propagation | Propagates data | Doesn't propagate data |
+------------------+----------------------------------+----------------------------+
内容总结
以上是互联网集市为您收集整理的javascript – d3.each()索引不是从0开始全部内容，希望文章能够帮你解决javascript – d3.each()索引不是从0开始所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。