D3.js：データ属性で要素を選択する代わりに？

Question

D3.jsを使用して循環ヒートチャートを作成しています。グラフの任意のセクションをマウスオーバーすると、同じ角度のすべての要素もハイライト表示されるようにイベントを追加します。

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イベントは、データによって選択されます（。this Guardian visualisation上のマウスオーバーイベントなど）

瞬間、私は明示的にデータはすべてのpath要素のHTMLに属性を追加することでこれをやっています属性：

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

マウスオーバー：

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