score:13

Accepted answer

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.

score:14

The callback passed to the call method is actually passed the selection, not the data.

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

So, what you were probably looking for is the each method.

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

Related Query

More Query from same tag