6

D3.js を使用して円形のヒート チャートを作成しています。イベントを追加して、チャートの任意のセクションにマウスを合わせると、同じ角度のすべての要素も強調表示されるようにしたいと考えています。(このガーディアン ビジュアライゼーションのマウスオーバー イベントのように。)

現時点では、すべてのpath要素の HTML にデータ属性を明示的に追加することでこれを行っています。

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

そして、マウスオーバーイベントはデータ属性で選択します:

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 に格納されているデータのみに基づいてパスを選択する方法が「あるべき」であると私は感じています。

4

1 に答える 1

11

パスへの参照を保存する場合は、ここで 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');
});
于 2013-08-05T11:29:20.147 に答える