Recently I delved into exploring the capabilities of the d3 framework. One thing that caught my attention was the presence of a third parameter in the event listener for v3. Despite always being 0, I couldn't find any explanation on its intended purpose.
According to the documentation:
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.
This leaves me questioning the significance of this mysterious third parameter.
In the code snippet below, you'll notice that when clicking on any of the rectangles, three parameters are passed to the function f:
var svg = d3.select("body").append("svg")
function f(d, idx, whoami) {
console.log('I am the data:\t' + d);
console.log('I am the index:\t' + idx);
console.log('But who am i?\t' + whoami);
console.log('Length:' + arguments.length);
console.log(arguments);
}
var data = ['A', 'B', 'C'];
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("x", 0)
.attr("y", function(el, i) {return i * 40;})
.attr("width", 100)
.attr("height", 40)
.on("click", f);rect {
fill: #333;
opacity: 0.3;
stroke: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>