0

http://bl.ocks.org/1249394 を1ページに表示するように、2つのd3.jsツリー図を配置しようとしています。両方のツリーには、Javascriptオブジェクトとは異なるデータが読み込まれます。最初のものは次の場所に表示されます。

<div id="chart"></div>

2番目のツリーは次の場所にロードされます。

<div id="chart2"></div>

＃chartと＃chart2はどちらも同じページにあり、最初のツリー（#chart）がページの上部に表示され、そのすぐ下に2番目（＃chart2）が表示され、グラフのdivが配置されます。これを行うために、http：//bl.ocks.org/1249394から同じコードを2回適用しました。各divに1つあり、2つのコードの違いは、ツリー1：＃chartとツリー2：＃chart2であるツリーの場所だけです。

ツリー1：

var vis = d3.select("#chart").append("svg:svg")

ツリー2：

var vis = d3.select("#chart2").append("svg:svg")

変数名や関数名など、他のすべては同じままです。これはうまく機能し、クリック関数（コードの最後の関数:)を除いて、両方の図が正常に表示されます。ツリーノードのクリックで折りたたんだり展開したりできるのは2番目のツリーのみで、最初のツリーはできなくなります。これは、最初のものはもはやインタラクティブではありません。

これを修正するにはどうすればよいですか？

4

1 に答える 1

2

visインタラクションが依存する 2 番目のツリーを描画すると、変数が上書きされます。複数のチャートを作成する場合は、各ツリーが独自のスコープ内にあるようにクロージャーを作成する必要があります。こうすればお互いに干渉しません。

Mike は、再利用可能なグラフの作成に関する素晴らしい投稿をhttp://bost.ocks.org/mike/chart/に書きました。クロージャの作成とプロパティの表示について説明します。

于 2012-09-23T19:24:12.197 に答える