title: D3.js: alternative to selecting elements by data attributes?
body: <p>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 <a href="http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states">this Guardian visualisation</a>.)</p>
  
  <p>At the moment, I'm doing this by explicitly adding data attributes to the HTML for every <code>path</code> element: </p>
  
  <pre><code> 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 });
  </code></pre>
  
  <p>And then my mouseover event selects by data attribute: </p>
  
  <pre><code>d3.selectAll("#chart4 path").on('mouseover', function() {
    var d = d3.select(this).data()[0];
    d3.selectAll('path[data-pathnumber="' + d.pathNumber + '"]').attr('fill', 'black');
  });
  </code></pre>
  
  <p>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. </p>