Question

每次设置回调时d3似乎遍历整个数组。

起初，我以为像attr()或each()这样的调用函数将它们添加到了管道中，并且整个管道后来又一次全部执行了。

我试图设置代码以在d3使用的SINGLE循环中动态处理数据，而我刚刚发现each()会为每个点调用一个函数。

目标是将我的观点从javascript对象转换为单个值，并避免在每个回调或单独的循环中这样做。

我尝试了一下，发现了这种行为。

这是一个基本示例：

d3.select(ref)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.each(function(d) { console.log(d); })
.attr("y", function(d) { console.log("attr y"); return 10; })
.attr("fill", function(d) { console.log("fill"); return "red";})

这是一个jsfiddle：http://jsfiddle.net/7q3p2kah/1/

我希望看到这个：

red
attr y
fill
green
attr y
fill
...

但是我得到了

red
green
blue
yellow
black
(4)attr y
(4)fill

所有此实验的目的是减少显示我的图表所需的时间。

我一定要使用一个单独的循环来处理我的数据，还是我没有得到什么？

它看起来很像一个yes()或no()问题，但我很高兴看到任何解释或替代解决方案。

Answer 1

您可以将attr函数包装在each中：

...
.each(function(d) { 
    d3.select(this)
    .call(function(selection){console.log(d);})
    .attr("y", function(d) { console.log("attr y"); return 10; })
    .attr("fill", function(d) { console.log("fill"); return "red";}
})
...

更一般地像这里：https://jsfiddle.net/ibowankenobi/wns19k4d/

如果我是我，我会将所选节点存储在NodeList或LiveHTMLCollection中，而不是使用d3.select(this)并像list[i]之类的东西{{1} }从长远来看可能会有点慢。

D3是否为我们设置的每个回调循环遍历整个数组？

1 个答案: