javascript - 传递给监听器的第三个参数是什么？

Question

我目前开始玩d3框架。我观察到 v3还有第三个参数传递给事件监听器。似乎总是 0但我找不到任何关于它应该代表什么的信息？
来自 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.

这第三个参数是什么意思？

在本例中，您将看到，一旦您单击任何矩形，3 个参数就会传递给 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>

Answer 1

这实际上是一个未记录的功能。看着implementation的 selection.on()回到 v3.5.17，您会注意到 selection.each()是 used internally将监听器绑定(bind)到当前选择的每个节点。

return this.each(d3_selection_on(type, listener, capture));

从那里开始内部函数 d3_selection_on 将评估为 onAdd 用于添加监听器和对 onAdd 的引用函数将作为回调传递给 .each() .因此， .each()将实际执行 onAdd对于当前选择中的每个节点。 onAdd另一方面，将关闭 .each() 传递给它的参数。调用 storing它们在听众的上下文中:

function d3_selection_on(type, listener, capture) {

  /* ... */

  function onAdd() {
    var l = wrap(listener, d3_array(arguments));  // wrap points to d3_selection_onListener
    /* ... */
  }

  /* ... */

function d3_selection_onListener(listener, argumentz) {
  return function(e) {
    /* ... */
    argumentz[0] = this.__data__;                 // Set the latest datum as the first argument
    try {
      listener.apply(this, argumentz);            // Pass arguments from closure to the listener
    } finally {
      d3.event = o;
    }
  };
}

查看 selection.each() 的执行情况有人注意到不只是两个论点——正如 docs 中提到的那样。 — 传递给回调，而不是 three arguments :

if (node = group[i]) callback(node, i, j);

第三个参数 j作为组的索引。由于您的代码没有使用分组，因此该参数始终计算为 0 .
修改您的演示可以轻松演示设置分组选择如何影响第三个参数的值。以下片段复制了您的三个矩形，将每组矩形放入一个 <g>同时使用具有自己的数据绑定(bind)的子选择来建立分组。

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'], ['a', 'b', 'c']];

svg.selectAll('g')
  .data(data)
  .enter().append('g')
  .selectAll('rect')
  .data(d => d)
  .enter().append('rect')
    .attr("x", function(el, i, j) {return j * 110;})
    .attr("y", function(el, i) {return i * 40;})
    .attr("width", 100)
    .attr("height", 40)
    .on("click", f, true);

rect {
  fill: #333;
  opacity: 0.3;
  stroke: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

同样，这完全没有记录，因为 .each() 的文档中都没有提到它。也不在 .on() 上的那个.