当数据进入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);
};

由于

Answer 1

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

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

所以，你可能正在寻找的是每种方法。

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

Answer 2

您需要方法.call(function(d))

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

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

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

我已经创建了这个here.

的基本小提琴

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