How to add a click event on nvd3.js graph

问题

I am using nvd3.js and trying to add a click event

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

JSFiddle

How can I do that ?

回答1:

I was running into the same issue and was about to dump NVD3 all together because of the lack of documentation... What you need to do is add a callback function to addGraph(). Also note the d3.selectAll() instead of d3.select().

Good Luck.

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");
           });
      });

回答2:

Just found out that this works as well (at least for multibar charts):

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

I had to look at the source in src/multibar.js to find out; since it's there, I guess this is the way it was intended to be done. However, I second what Alex said in his answer: the lack of documentation for NVD3 is a really big disadvantage. Which is sad because the general idea of the project is great: giving us the power of D3 without going into all the details...

回答3:

There are three key points here.

1) No documentation means you have to go through the source code.

2) All graphs have a tooltip, which means events are already firing in the source code.

3) Use the configuration object (in the Documentation) as a road map of the source code.

ie.

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

Open the nvd3/nv.d3.js file

CTRL+F+ the chart type. In this case it is 'multiChart'.

You will see nv.models.multiChart.

Scroll down to find the tooltip events and you will find the needed documentation.

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) });

Therefore, to write your own event...

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

回答4:

This worked for me: (e.target.data outputs the data attributes attached to that element, like x, y)

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

回答5:

If using AngularJS, use this code in your app.js.

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

回答6:

This worked for me. https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

Just use console.log(e) instead of console.log(e.data) to avoid undefined error.

回答7:

This coderwall blog heads us the right direction.

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

回答8:

jQuery makes this easy:

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

Fiddle @ http://jsfiddle.net/eTT5y/1/

回答9:

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

This would work fine for the Pie Chart ,Similarly u can go ahead for other charts too....

回答10:

For stacked area chart, you should disable interactiveGuideline and use elementClick.area:

chart.useInteractiveGuideline(false);

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

回答11:

Just add callback to you options in controller If using BarChart then replace multibar to discretebar

$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);                             
        });
    }
}
};

来源：https://stackoverflow.com/questions/17598694/how-to-add-a-click-event-on-nvd3-js-graph

标签

events

d3.js

nvd3.js