3

通常の縦棒グラフがあり、縦棒をクリックして一連の関連情報にドリルダウンできるようにしたいと思います。この動作は、highchartsデモがドリルダウンを行う方法と似ています。誰かがこれをnvd3.jsに実装できましたか？

4

1 に答える 1

5

参照しているHighchartsデモは、ブラウザの市場シェアの縦棒グラフです。ブラウザの1つをクリックすると、そのブラウザの各バージョンの市場シェアを示す2番目の垂直棒グラフが表示されます。バージョンをクリックすると、前のチャートに戻ります。

nvd3モデルは、d3のディスパッチャーを使用したクリックリスナーとホバーリスナーをサポートしています。詳細については、d3のgithubwikiを参照してください[1]。

historyBarチャートのnvd3ソースを参照すると、ディスパッチャが設定されている場所を確認できます[2]。

したがって、クリックされているシリーズをパラメーターとして受け入れる'elementClick'イベントが発生したときに呼び出される関数を記述します。クリックされた系列がわかったので、データを切り替えてグラフを再描画できます。

これがお役に立てば幸いです。nvd3がクリックリスナーとホバーリスナーをどのように使用しているかを追跡するのに少し時間がかかりました。

nvd3のフロントページで使用されているディスパッチャの例を次に示します。

chart.stacked.dispatch.on('areaClick.updateExamples', function(e) {
        setTimeout(function() {
          mainExample.update();
          exampleOne.update();
          //exampleTwo.update();
          exampleThree.update();
        }, 100);
      })

[1] https://github.com/mbostock/d3/wiki/Internals#events

[2] https://github.com/novus/nvd3/blob/master/src/models/historicalBar.js#L23

于 2013-04-17T18:10:28.370 に答える