私は D3.js を学習しており、ストリームグラフで使用されるデータ キーについて理解を深めようとしています。公式のストリームグラフの例を適応させたい:
...各パスに明示的なデータキーがあり、マウスオーバーでデータキーがログに記録されるようにします。
公式の例では、次のようにパスを追加します。
var area = d3.svg.area()
.x(function(d) { console.log('x', d.data); return d.x * w / mx; })
.y0(function(d) { return h - d.y0 * h / my; })
.y1(function(d) { return h - (d.y + d.y0) * h / my; });
vis.selectAll("path")
.data(data0)
.enter().append("path")
.style("fill", function() { return color(Math.random()); })
.attr("d", area);
data0
次のようにコードを調整しようとしましたが、 (現在は配列の配列)の構造を変更して目的を達成する方法がわかりません。
vis.selectAll("path")
.data(data0, function(d) { return d.name }) // Add key function
.enter().append("path")
.style("fill", function() { return color(Math.random()); })
.attr("d", area)
.on("mouseover", function (d,i) {
console.log("mouseover", d.name); // Log name property on mouseover
});
現状では、 の構造に変更を加えてdata0
いないため、当然のことながら動作しません。関数と関数を台無しにせずにname
プロパティを追加するにはどうすればよいですか?data0
area
.data()
更新: 少し明確にするために: D3 ドキュメントでは、area 関数は 2 次元配列を期待していると述べています。data0
では、2 次元配列から、それぞれがname
キーとキーを持つオブジェクトの配列に変更した場合、data
渡すものも変更するにはどうすればよいarea
でしょうか?