Как добавить событие click на графике nvd3.js

Ответ 1

Я столкнулся с той же проблемой и собирался свалить NVD3 все вместе из-за отсутствия документации... Что вам нужно сделать, так это добавить функцию обратного вызова addGraph(). Также обратите внимание на d3.selectAll() вместо d3.select().

Удачи.

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

Только что выяснилось, что это работает (по крайней мере, для карт многобайтов):

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

Мне пришлось посмотреть источник в src/multibar.js, чтобы узнать; так как он там, я думаю, это так, как это было сделано. Тем не менее, я второй, что сказал Алекс в своем ответе: отсутствие документации для NVD3 - действительно большой недостаток. Что грустно, потому что общая идея проекта велика: дает нам силу D3, не вдаваясь во все детали...

Ответ 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

Это сработало для меня: (e.target. data​​strong > выводит атрибуты данных, прикрепленные к этому элементу, такие как x, y)

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

Ответ 5

Это сработало для меня. https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

Просто используйте console.log(e) вместо console.log(e.data), чтобы избежать ошибки undefined.

Ответ 6

Если вы используете AngularJS, используйте этот код в app.js.

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

Ответ 7

Этот блог coderwall направляет нас в правильном направлении.

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

Ответ 8

jQuery упрощает:

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

Это будет отлично работать для круговой диаграммы, также вы можете продолжить и другие графики.

Ответ 10

Для диаграммы с разбивкой по областям вы должны отключить interactiveGuideline и использовать elementClick.area:

chart.useInteractiveGuideline(false);

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