6

我正在使用 D3.js 构建一个圆形热图，并且我想添加事件，以便当我将鼠标悬停在图表的任何部分时，相同角度的所有元素也会突出显示。（就像这个 Guardian 可视化上的鼠标悬停事件一样。）

目前，我通过为每个path元素显式添加数据属性到 HTML 中来做到这一点：

 g.selectAll("path").data(data)
   .enter().append("path")
   .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
   .attr("data-pathnumber", function(d) { return d.pathNumber });

然后我的鼠标悬停事件按数据属性选择：

d3.selectAll("#chart4 path").on('mouseover', function() {
  var d = d3.select(this).data()[0];
  d3.selectAll('path[data-pathnumber="' + d.pathNumber + '"]').attr('fill', 'black');
});

然而，这实际上是在 D3 中做事的正确方法吗？在我看来，“应该”有一种方法可以仅基于存储在 DOM 中的数据，而不是基于显式数据属性来选择路径。

4

1 回答 1

11

如果您存储对路径的引用，则可以在此处使用 selection.filter：

var paths = g.selectAll("path").data(data)
   .enter().append("path")
   .attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
;

鼠标移到：

d3.selectAll("#chart4 path").on('mouseover', function(thisData) {
    paths
        .filter(function (d) { return d.pathNumber === thisData.pathNumber; })
        .attr('fill', 'black');
});
于 2013-08-05T11:29:20.147 回答