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
    });

Answer 2

您可以将“id”属性添加到您的圈子，然后在鼠标悬停函数中引用这些 id。像这样的东西：

circles.attr("id", function(d) { return "id" + d; })

list.on('mouseover', function(d) { 
  d3.select("#id" + d)
    .style("fill", "yellow") 
})

http://jsfiddle.net/woodedlawn/7ZqZx/