D3.js v6.2 - 在侦听器函数中获取数据索引 - Selection.on('click',listener)

Question

在以前的版本中，可以i通过以下方式检索索引： selection.on("click", function(d,i){...}

然而，这在最新版本中似乎不再起作用，因为第一个参数始终是事件对象。如何获取监听函数中数据的索引？

let data = [2,5,8,9]

d3.select("body").selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=>d)
  .on("mouseover", function(e,d,i){
    //console.log(e); --> event
    console.log(d); 
    console.log(i);
    // i should be the index of the hovered element
  })

<script src="https://d3js.org/d3.v6.min.js"></script>

当在选定元素上分派指定事件时，将评估该元素的指定侦听器，并传递当前事件 (event) 和当前数据 (d)，并将其作为当前 DOM 元素 (event.currentTarget)。

官方文档：https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_on

Answer 1

关于 d3-selection 2.0 中新功能的Observable Notebook建议使用局部变量来保留索引：

\n

\n

侦听器不再传递所选元素\xe2\x80\x99s 索引 ( i ) 或同级元素 ( Nodes )。这些很少使用，如果重新选择元素会产生令人困惑的行为，并且可能导致内存泄漏。如果需要它们，请将它们烘焙到 element\xe2\x80\x99s 数据中或使用局部变量。

\n

\n

这可以通过以下方式轻松完成：

\n

\r\n

\r\n

let data = [2,5,8,9]\n\nconst index = d3.local();            // Local variable for storing the index.\n\nd3.select("body").selectAll("p")\n  .data(data)\n  .enter()\n  .append("p")\n    .text(d=>d)\n    .each(function(d, i) {\n      index.set(this, i);            // Store index in local variable.\n    })\n    .on("mouseover", function(e,d,i){\n      console.log(d); \n      console.log(index.get(this));  // Get index from local variable.\n    });

\r\n

<script src="https://d3js.org/d3.v6.min.js"></script>

\r\n

\r\n

\r\n

\n

请注意，尽管为了清楚起见，上面的示例使用了单独的调用，但为了简洁和提高性能，.each()也可以在现有的调用中完成。.text()

\n