D3 - ネストされた関数を呼び出すと親関数が呼び出され、チャートが繰り返されます

Question

D3再利用可能なチャートパターンを理解して実装しようとしています。

See sample implementation。

ここで、id '#updatableChart'を選択すると、updatableChartが呼び出されます。

質問1：私は、後続のコードでは、以下のように呼び出すことで、高さパラメータを調整したい場合は

、それがチャートを複製します。

d3.select('#updatableChart') 
    .call(updatableChart.height(450)); 

元のグラフに影響を与えずにこのパターンを使用し、高さを更新する方法を教えてください。

質問2：私は別のチャートが必要な場合

さて、たとえば、DIVのid「＃のupdatableChart2」の下で、私はまだ以下のコードを使用してグラフを呼び出して取得することができます。

d3.select('#updatableChart2') 
    .call(updatableChart)` 

しかし、単にupdatableChart.height(500);と言って高さを調整しようとすると、2番目のグラフにしか影響しません。どのようにチャートインスタンスを選択するのが具体的なのですか？

ありがとうございます。

Answer 1

回答1：私はD3の選択範囲内updatableChart.height(450)を呼び出していますので、

チャートが再描画される理由は、あります。代わりに、それは単に高さを調整するためにupdatableChart.height(450)と呼ばれていたはずです。

回答2：

問題は、同一のチャートオブジェクトが別のdiv要素に接続されていることでした。

異なるdivの下に別のチャートが必要な場合は、元のbarchart()が別のコピー、たとえばvar updatableChart2 = barChart()にインスタンス化され、さらに使用されている必要があります。