D3.js: альтернатива выбору элементов атрибутами данных?

Question

Я использую D3.js для построения круговой диаграммы тепла, и я хочу добавить события так, чтобы при наведении курсора мыши на любую часть графика все элементы под одним углом также выделяли. (. Как и наведения мыши событий на this Guardian visualisation)

На данный момент, я делаю это явно добавляя атрибуты данных в HTML для каждого элемента path:

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

MouseOver:

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