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

我在这里创造了一个基本的小提琴.

请注意,如果要.enter()在与使用它相同的位置返回的选择上调用函数,则可以使用此选项.也可以通过使用将函数绑定到enter给定DOM元素的事件.on('enter',function),但这将要求您输入数据的元素已经存在.