D3 .on sends 3 arguments to a callback function

Question

I read in the D3 docs:

The specified listener is invoked in the same manner as other operator functions, being passed the current datum d and index i, with the this context as the current DOM element.

But when I run it like this:

d3.select('.bar')
  .on('click', _toggleBar)

Then I see 3 arguments being passed to the _toggleBar function:

function _toggleBar() {
    console.log('arguments.length: ' + arguments.length);
    console.log(arguments);
}

Where there is a datum object, index and third argument which is always zero.

Why does it happen and what's this third argument?

Tony Tony · Accepted Answer · 2015-09-10T16:59:12

From the d3.js source for on (as per discussion in the comments below):

d3_selectionPrototype.on = function(...) {
    ...
    return this.each(d3_selection_on(...);
}

The parameters being passed through are the ones being passed to selection.each. Which, based on that source, takes 3 params:

return d3_selection_each(this, function(node, i, j) {...

Which as @CoolBlue correctly identifies is the group index and is shown in this fiddle.

D3 .on sends 3 arguments to a callback function

1 Answers