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

Question

我正在使用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 });

然后我的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');
});