D3.js: alternatywa do wybierania elementów według atrybutów danych?

Question

Używam D3.js do tworzenia wykresu kołowego ciepła i chcę dodać zdarzenia, aby po najechaniu kursorem myszy na dowolną sekcję wykresu wszystkie elementy pod tym samym kątem również były podświetlone. (. Podobnie jak w przypadku zdarzeń mouseover na this Guardian visualisation)

W chwili obecnej, robię to jawnie dodawanie danych atrybutów HTML dla każdego 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 }); 

I wtedy mój zdarzenie mouseover wybiera dane atrybut:

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

Czy jest to jednak właściwy sposób robienia rzeczy w D3? Wydaje mi się, że "powinien" być sposobem na wybór ścieżki opartej wyłącznie na danych przechowywanych w DOM, a nie na jawnych atrybutach danych.

Answer 1

Jeśli przechowywać odniesienie do swoich ścieżek, można użyć selection.filter tutaj:

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