d3.js - 数据进入d3时调用一次函数

Question

有没有办法在使用 data().enter() 输入数据时调用函数？

例如，在这个当前的 jsfiddle： http: //jsfiddle.net/p3m8A/4/中，我有一个绘制组的函数，我想在新数据进入时调用这个函数。当前的 jsfiddle 没有做任何事情，但目标是单击红色方块并在单击红色方块时使用 .data.enter 绘制一个紫色方块。

我要开始工作的具体部分是：

canvas.selectAll("#boxGroup")
    .data(data)
.enter().function(d,i) {
    drawBox(150,20,d);
};

谢谢

score 14 · Accepted Answer

传递给 call 方法的回调实际上传递的是选择，而不是数据。

enterSelection.call(function(selection){/* this === selection */});

因此，您可能正在寻找的是 each 方法。

enterSelection.each(function(d,  i){/* this is selection */ drawBoxes(150,20,d);});

score 13 · Accepted Answer

你想要的方法.call(function(d))

这将运行您的函数一次，d作为您提供的所有数据的数组传递。i未定义为使用callafter enter()。

如果您想绘制多个框，基于d，您的代码将如下所示：

canvas.selectAll("boxGroup")
    .data(data)
    .enter()
    .call(function(d){drawBoxes(150,20,d);});

请注意，如果您想.enter()在使用它的同一位置对返回的选择调用一个函数，这就是您想要使用的。也可以使用将函数绑定到enter给定 DOM 元素的事件.on('enter',function)，但这需要您输入数据的元素已经存在。

2 回答 2