0

ユーザーがボタンをクリックするたびに d3.js 棒グラフを更新しようとしています。

ここに示すように、トランジションをどこかに追加しようとしていますが、データをその場で更新しません。

私はこのjsfiddleで作業しています。

次のコードのようなものを試しましたが、データが更新されません:

btn.onclick = function(){
  data.push({date: new Date(2013, 3, 10), total: 78});
  updatePlot();
}

function updatePlot(){
  d3.select('#graphTest').transition();
}

棒グラフのデータを更新するように updatePlot メソッドを変更するにはどうすればよいですか?

4

1 に答える 1

2

いくつかの手順をスキップしているようです。D3 は、実際には舞台裏であなたのためにたくさんの魔法を行っているわけではありません。データをプッシュして、自分で DOM を更新する必要があります。D3 は、このプロセスを管理するための便利なプログラミング モデルを提供するだけです。

したがって、どのビジュアライゼーションでも、次の興味深い部分が得られます。

  1. データ配列
  2. DOM ノード
  3. DOM ノードにバインドされたデータ配列要素。
  4. DOM ノードの属性とスタイル。

コードはデータ配列を更新していますが、他の部分を管理していません。更新されたデータを DOM に戻す必要があります (特に、ノードを表示する属性/スタイル)。

したがって、プロットを更新するには、次のことを行う必要があります。

  1. selection.data新しいデータを既存の DOM にバインドするために呼び出します。キー関数を定義して、データが DOM ノードにマップされる方法を制御できます。
  2. enter、exitおよびupdate選択を好きなように処理します。
  3. 新しいデータに基づいて属性とスタイルを移行します。

#3 については、これは を呼び出すだけの問題ではなく、selection.transitionどの属性とスタイルを移行するかを考える必要があります。attrトランジションでのandの呼び出しstyleは、DOM が最終値で 1 回だけではなく、補間された値で何度も更新されることを除いて、選択でそれらを呼び出すのとまったく同じです。

このプロセスをよりよく理解するには、Thinking with JoinsとWorking with Transitionsを読む必要があります。

于 2013-10-30T16:11:17.687 に答える