14

「Towards Reusable Charts」では、Mikeが最後に時系列グラフの例を示しています。その中で、彼は次の行を持っています：

// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);

これは、再利用可能なチャート オブジェクトの定義内で発生しています。私はこの声明を理解するのに苦労しています。

  1. まず、なぜ使用するのselect(this)ですか？thisコンテキストはチャート オブジェクトの現在のインスタンスですか? もしそうなら、わざわざページ上の svg 要素を選択してみませんか?

  2. なぜselectAllですか？各チャート オブジェクトは 1 つのチャートに対応していませんか?

  3. 私が見た他のほとんどの例のように[data]、ただの代わりに、なぜ? dataさらに、データを (たとえば) パス要素ではなく、svg 要素にバインドするのはなぜですか?

どんな助けにも感謝します。

4

2 に答える 2

13

この記事で定義されているように、再利用可能なチャートは、任意の DOM 要素にチャートを挿入するdataために使用できます。さらに、ご指摘のとおり、DOM要素内に既に存在するグラフを更新するために使用できます。使用方法は次のとおりです（記事から）：

var formatDate = d3.time.format("%b %Y");

var chart = timeSeriesChart()
             .x(function(d) { return formatDate.parse(d.date); })
             .y(function(d) { return +d.price; });

// Put the chart _inside_ #example1
d3.select("#example1")
  .datum(data1)
  .call(chart);

// Put the same chart _inside_ #example2
d3.select("#example2")
  .datum(data1)
  .call(chart);

// Update the data for #example1, without appending another <svg> element
setInterval(function () {
    d3.select("#example1")
      .datum(data2)
      .call(chart);
}, 5000);

次に、それがどのように行われるかについての懸念に対処します。

  1. まず、このコードは 内で実行されることに注意してくださいselection.each(...)。API リファレンスによると、 .eachthis内のコンテキストは DOM 要素です。API リファレンスはさらに次のように述べています。

    each 演算子は、コールバック関数内で d3.select(this) を使用することにより、再帰的に選択を処理するために使用できます。

    そのため、現在の DOM 要素のみを含む をd3.select(this)返すだけで、その中に要素d3.selectionが含まれている場合と含まれていない場合があります<svg>。ページ上のすべての<svg>要素を選択すると、グラフを表示する DOM 要素だけでなくページ全体が混乱するため、あまり再利用可能なグラフにはなりません。

  2. を使用すると、元のグループ化が維持されるのとselectAllは対照的に、D3 が処理する要素の新しいグループ化が作成されます。ネストされた選択の仕組みの詳細については、selectこの記事を参照してください。そして、はい、あなたの言うとおり、selectAllここのグループは 1 つの要素のみを作成または更新するために使用されます<svg>。これにより、次のポイントに進みます。

  3. D3 の背後にある基本的な概念の 1 つはdata-joinsです。これは、データの配列が DOM 要素のグループに1 対 1 で結合される方法です。この場合、いくつかを正確に 1 つの要素に追加/更新することに関心があります。Usingは、1 つの要素にバインドできる 1 つの要素の配列を提供します。または、これは次のように書くこともできます。data<svg>[data]<svg>

  var svg = d3.select(this).selectAll("svg").data([1]); // No `data`

   // Update the area path.
   g.select(".area")
      .data(data)    // Specifying data explicitly
      .attr("d", area.y0(yScale.range()[0]));

   // Update the line path.
   g.select(".line")
      .data(data)   // Specifying data explicitly
      .attr("d", line);

ただし、データを要素にバインドすることにより、サブセレクションでデータを既に使用できるようにしておくと、より便利です。<svg>

于 2013-02-03T11:26:53.237 に答える
-5

再利用可能なチャートとは、チャートがすでに作成されている必要があるということです。単純にチャートの利点を得ることができます。ゼロからチャートを作成するために時間を費やす必要はありません。

クレジット: d3 の再利用チャート

于 2014-10-21T06:29:13.023 に答える