我的问题与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() does 从索引 0 开始.考虑到代码中的内容，您在代码中看到的是预期的行为。
这里的问题很简单:有一个<body>当然是页面中的元素。您的数据数组有 5 个元素，其中之一绑定(bind)到 <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>我们还可以证明数组中的第一个元素绑定(bind)到 <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)
)
这里我无法提供工作堆栈片段，因为如果我们尝试记录 D3 选择，它会崩溃。但结果将是这样的:
[undefined × 1, EnterNode, EnterNode, EnterNode, EnterNode]
那个undefined是“更新”选择(正文)，而 4 EnterNode s 是“输入”选项。这让我们解释了为什么 each()在您的代码中以这种方式表现。
如果你看一下源代码...
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向我们保证我们的“输入”选择始终包含数据数组中的所有元素。
奖金:select和 selectAll表现不同。大多数人认为唯一的区别是前者只选择1个元素而后者选择所有元素。但还有更细微的差别。看看这张表:
关于javascript - d3.each() 索引不从 0 开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44950589/