D3.js: alternative to selecting elements by data attributes?

Question

I'm using D3.js to build a circular heat chart, and I want to add events so that when I mouseover any section of the chart, all the elements at the same angle also highlight. (Like the mouseover events on this Guardian visualisation.)

At the moment, I'm doing this by explicitly adding data attributes to the HTML for every path element:

 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 });

And then my mouseover event selects by data attribute:

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

However, is this actually the correct way to do things in D3? It feels to me like there "ought" to be a way to select the path based only on the data stored in the DOM, not on explicit data attributes.

Answer 1

If you store the reference to your paths, you can use selection.filter here:

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

Mouseover:

d3.selectAll("#chart4 path").on('mouseover', function(thisData) {
    paths
        .filter(function (d) { return d.pathNumber === thisData.pathNumber; })
        .attr('fill', 'black');
});