3

私は 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プロパティを追加するにはどうすればよいですか?data0area.data()

更新: 少し明確にするために: D3 ドキュメントでは、area 関数は 2 次元配列を期待していると述べています。data0では、2 次元配列から、それぞれがnameキーとキーを持つオブジェクトの配列に変更した場合、data渡すものも変更するにはどうすればよいareaでしょうか?

4

2 に答える 2

6

この例のデータには「name」プロパティがないため、使用するにはそれをデータに追加する必要があります。参照するデータキーは、データをマージ/更新するときに使用されます。つまり、すでにいくつかのパスを描画してから更新します (それらのいくつか)。この.data()関数は、どのデータが更新され、どのデータが新しいかを把握しようとします。それがうまくいかない場合は、データキーを使用してそれを助けることができます。つまり、あなたの場合、同じ名前のものは同じデータであることを伝えます。

于 2012-03-12T18:08:35.117 に答える
0

データ キーの意味が「データの凡例」である場合は、グラフのさまざまな領域でマグニチュード、凡例の黒丸、および凡例のテキストの配置を完全に分離した次の例をご覧ください。

各例では、データがどのようにラベル付けされ、構造化され、渡され、使用されるかが明確にわかります。

また、mouseover イベントと mouseout イベントを介してそれらを結び付け、要素の上または外にマウスを移動すると、セット内のすべての要素の色が同時に変化するようにしました。

これが役立つことを願っています。

フランク

于 2012-04-19T03:57:02.003 に答える