javascript - 使用 d3 js 引用不同的元素集

Question

这必须很简单，但自从我使用 d3.js 以来已经有一段时间了，我找不到一个好的解决方案。

我有一组数据，我用它来创建两组元素

 circles = svg.selectAll('.highcircles')
          .data(data)
          .enter()
          .append('circle');

和

  list.selectAll('.states-list')
          .data(data)
          .enter()
          .append('p');

我希望能够将鼠标悬停在 <p> 上标签，使相关的圆圈具有动画效果。我想不出如何将两者联系起来。是通过数据状态属性吗？有更好的解决办法吗？

Answer 1

selection.filter可用于根据数据过滤选择。您可以使用 <p> 中的数据过滤 <circle> 的事件目标像这样选择:

var circleMatch = svg.selectAll(".highcircles")
    .filter(function(d) {
        return d.key === targetDatum.key;  // 'key' is some datum-unique property
    });