d3.js - D3.js:通过数据属性选择元素的替代方法？

Question

我正在使用D3.js来构建圆形热图，并且我想添加事件，以便当我将鼠标悬停在该图的任何部分上时，所有位于相同角度的元素也将突出显示。 (就像this Guardian visualisation上的mouseover事件一样。)

目前，我正在通过将每个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');
});