Hightchartからで、D3のJsとドリルダウン

Question

いくつかのいずれかが、D3 JSライブラリで列のドリルダウンを行う方法を提案してもらえますと、チャートの列、例えば、以下の

を作成する方法

http://www.highcharts.com/demo/column-drilldown

Answer 1

Aこの問題の完全なコード例はおそらくかなり広範囲なので、私は主にどのようにアプローチし、概念をコードに変換するのに十分なD3を知っていると仮定します。

一般的な棒グラフを描画する機能があるとします。その機能の

一部はpriobably

1. のようなものは、あなたのスケールを設定あなたのSVG要素とコンテナ
2. を設定することになる（xとyのいずれかの1）
3. に基づいて軸を追加しますあなたが作成したスケール
4. バーをsvgコンテナに追加
   4.1データセットを配列として使用できることを確認してください
   4.2 Enter Selを作成します利用可能なデータのためのectionおよび追加rect要素が
   4.3アップデートは、すべての可能なバーノードのx、y
   4.4のようなあなたは、簡単な棒グラフを持っているあなたの出口の選択

出来上がり上の任意のノードを削除する属性。新しいコードはありません。ここではコードの詳細を見ることができます。 - >https://bl.ocks.org/mbostock/3885304 ドリルダウンのために： コードの繰り返しを避けるために、おそらく上記の手順を機能。たとえば、あなたのsvgとコンテナだけでなく、あなたのスケールを作成するセットアップ機能です。

セットアップ機能の重要な点は、ドリルスルーで再実行する必要がないことです。

次に、update機能が必要です。これには、ドリルスルーでチャートを更新するために再実行する必要があるステップ3+が含まれています。

ここで追加するのは、初めにスケールドメインを更新する機能を追加することです（データがドリルスルーで変更され、スケールに反映させるため）。

今、あなたはそれらの二つの機能を持っていることをあなたが本当にする必要があるすべては次のとおりです。

があなたの軸ラベルやあなたのバーにクリックハンドラを追加します（バーをクリックして今の方が簡単かもしれません）。あなたはそれのためにd3の.on()関数を使うことができます。 その場合は、クリックしたバーの値でデータをサブセット化するか（またはデータの構造に応じてバー値の新しいデータセットを取得する）、上で作成した更新関数を新しいデータで実行します。

それはこのような何かを見ることができる：何かが不明である

d3.selectAll('.bar-nodes) .on('click', function(d) { var updatedData = updateData(d); updateChart(updatedData); });

場合はいくつかのより具体的な質問が良いでしょう。 希望に役立ちます。