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/

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

2 个答案: