D3.js: thay thế cho việc chọn các phần tử theo thuộc tính dữ liệu?

Question

Tôi đang sử dụng D3.js để xây dựng biểu đồ nhiệt tròn và tôi muốn thêm sự kiện để khi tôi di chuyển bất kỳ phần nào của biểu đồ, tất cả các phần tử ở cùng một góc cũng làm nổi bật. (. Giống như những sự kiện mouseover trên this Guardian visualisation)

Tại thời điểm này, tôi đang làm điều này bằng cách thêm một cách rõ ràng dữ liệu thuộc tính HTML cho mọi phần tử 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 }); 

Và sau đó sự kiện mouseover tôi chọn bởi dữ liệu thuộc tính:

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

Tuy nhiên, đây thực sự là cách chính xác để thực hiện mọi thứ trong D3? Nó cảm thấy với tôi như có "nên" là một cách để chọn đường dẫn chỉ dựa trên dữ liệu được lưu trữ trong DOM, không phải trên các thuộc tính dữ liệu rõ ràng.

Answer 1

Nếu bạn lưu trữ các tham chiếu đến đường dẫn của bạn, bạn có thể sử dụng selection.filter đây:

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

di chuột:

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