Calling a function once when data enters in d3

Question

Is there a way to call a function when data enters using data().enter()?

For example, in this current jsfiddle: http://jsfiddle.net/p3m8A/4/ , I have a function that draws a group and I want to call this function when new data enters. The current jsfiddle doesn't do anything but the objective is to click on the red square and using .data.enter draw a purple square when the red square is clicked.

The specific part I'm trying to get to work is :

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

Thanks

Answer 1

You want the method .call(function(d))

This will run your function once, passing d as the array of all of the data you have provided. i is not defined for using call after enter().

If you want to draw multiple boxes, based on d, your code would look something like this:

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

I've created a basic fiddle of this here.

Note that this is what you want to use if you want to call a function on the selection returned by .enter() in the same spot as you're using it. It's also possible to bind a function to the enter event of a given DOM element by using .on('enter',function), but this would require that the element that you are entering data into already exist.