Question

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

目前，我是通过向每个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 });

然后我的mouseover事件按数据属性选择：

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中的数据选择路径，而不是基于显式数据属性。

Answer 1

如果您将引用存储到路径中，则可以在此处使用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');
});

D3.js：用数据属性选择元素的替代方法？

1 个答案: