web-dev-qa-db-ja.com

nvd3.jsグラフにクリックイベントを追加する方法

Nvd3.jsを使用しており、クリックイベントを追加しようとしています

d3.selectAll(".nv-bar").on('click', function () {console.log("test");});

JSFiddle

どうやってやるの ？

eventsd3.jsnvd3.js
22
Petran

私は同じ問題に遭遇し、ドキュメントがないためにNVD3をすべてダンプしようとしていました... addGraph（）にコールバック関数を追加する必要があります。また、d3.select（）の代わりにd3.selectAll（）にも注意してください。

幸運を。

nv.addGraph(function() {
     var chart = nv.models.multiBarHorizontalChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .margin({top: 5, right: 5, bottom: 5, left: 5})
         .showValues(false)
         .tooltips(true)
         .showControls(false);

     chart.yAxis
         .tickFormat(d3.format('d'));

     d3.select('#social-graph svg')
         .datum([data])
       .transition().duration(500)
         .call(chart);

       nv.utils.windowResize(chart.update);

       return chart;
     },function(){
          d3.selectAll(".nv-bar").on('click',
               function(){
                     console.log("test");
           });
      });
31
Alex

これが同様に機能することがわかりました（少なくともマルチバーチャートの場合）。

chart.multibar.dispatch.on("elementClick", function(e) {
    console.log(e);
});

調べるには、src/multibar.jsのソースを確認する必要がありました。そこにあるので、これは意図された方法だと思います。しかし、私はアレックスが彼の答えで言ったことを2番目に言います：NVD3のためのドキュメンテーションの欠如は本当に大きな欠点です。プロジェクトの一般的なアイデアが素晴らしいので、これは悲しいことです。すべての詳細に立ち入ることなく、D3の力を私たちに与えてください...

40
wexman

ここで3つのポイントがあります。

1）ドキュメントがないため、ソースコードを確認する必要があります。

2）すべてのグラフにはツールチップがあります。これは、ソースコードでイベントがすでに発生していることを意味します。

3）構成オブジェクト（ドキュメント内）をソースコードのロードマップとして使用します。

すなわち。

var config = {chart: {type: 'multiChart',xAxis:{},yAxis{}}

Nvd3/nv.d3.jsファイルを開く

Ctrl + F +グラフの種類。この場合は 'multiChart'です。

Nv.models.multiChartが表示されます。

下にスクロールしてツールチップイベントを探します。必要なドキュメントが見つかります。

lines1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
stack1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
bars1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });

したがって、独自のイベントを作成するには...

var config = {chart: {type: 'multiChart',
               bars1: {
                dispatch:{
                    elementClick:function(e){//do Stuff}
                },
               xAxis:{},yAxis{}
              }
4
Jed Lynch

AngularJSを使用している場合は、app.js。

$scope.$on('elementClick.directive', function(angularEvent, event){
    console.log(event);
});
2
Yati Gurditta

このcoderwallブログ は正しい方向に向かっています。

chr.scatter.dispatch.on('elementClick', function(event) { console.log(event); });

2
Arvind Chinniah

これでうまくいきました。 https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

未定義のエラーを回避するには、console.log（e.data）の代わりにconsole.log（e）を使用してください。

2
Disha teli

これは私のために働きました：（e.target .dataは、x、yのような、その要素にアタッチされたデータ属性を出力します）

$(document).on("click", "#chart svg", function(e) {
     console.log (e);
     console.log (e.target.__data__);
    });
2
Cliff Coulter

コントローラーのオプションにコールバックを追加するだけです。BarChartを使用している場合は、マルチバーをディスクリートバーに置き換えます。

$scope.options = {
chart: {
    type: 'multiBarHorizontalChart',
    height: 450,
    x: function(d){return d.label;},
    y: function(d){return d.value;},
    showControls: true,
    showValues: true,
    duration: 500,
    xAxis: {
        showMaxMin: false
    },
    yAxis: {
        axisLabel: 'Values',
        tickFormat: function(d) {
            return d3.format(',.2f')(d);
        }
    },
    callback: function(chart) {
        chart.multibar.dispatch.on('elementClick', function(e){
            console.log('elementClick in callback', e.data);                             
        });
    }
}
};
0
Sunil Jakhar

jQueryはこれを簡単にします：

$( ".nv-bar" ).click(function() {
  console.log("test");
});

フィドル@ http://jsfiddle.net/eTT5y/1/

0
pmont
$('.nv-pie .nv-pie .nv-slice').click(function(){
   temp = $(this).text();
   alert(temp);
})

これは円グラフでも問題なく機能します。同様に、他のグラフでも同様に処理できます。

0
itsaruns

積み上げ面グラフの場合、interactiveGuidelineを無効にし、elementClick.areaを使用する必要があります。

chart.useInteractiveGuideline(false);

chart.stacked.scatter.dispatch.on("elementClick.area", function(e) {
  console.log(e);
});
0
Saeid Zebardast