D3.js：通过数据属性选择元素的替代方法？答案

【问题标题】：D3.js: alternative to selecting elements by data attributes?D3.js：通过数据属性选择元素的替代方法？
【发布时间】：2013-08-06 18:40:33
【问题描述】：

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

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

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

【问题讨论】：

标签： d3.js

【解决方案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.select(this).data()[0].pathNumber 可以替换为 m.pathNumber 如果 mouseover 函数以 'm' 作为参数。