时间戳

首页 > 解决方案 > D3.js v6.2 - 在监听函数中获取数据索引 - selection.on('click', listener)

d3.js - D3.js v6.2 - 在监听函数中获取数据索引 - selection.on('click', listener)

问题描述

在以前的版本中，可以通过以下方式检索索引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)，并将 this 作为当前 DOM 元素 (event.currentTarget)。

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

标签： d3.js

解决方案

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

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

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

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

const index = d3.local();            // Local variable for storing the index.

d3.select("body").selectAll("p")
  .data(data)
  .enter()
  .append("p")
    .text(d=>d)
    .each(function(d, i) {
      index.set(this, i);            // Store index in local variable.
    })
    .on("mouseover", function(e,d,i){
      console.log(d); 
      console.log(index.get(this));  // Get index from local variable.
    });
<script src="https://d3js.org/d3.v6.min.js"></script>

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

推荐阅读