web-dev-qa-db-fra.com

Comment ajouter un événement de clic sur le graphique nvd3.js

J'utilise nvd3.js et j'essaie d'ajouter un événement de clic 

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

JSFiddle

Comment puis je faire ça ?

eventsd3.jsnvd3.js
19
Petran

J'avais le même problème et j'étais sur le point de vider NVD3 en même temps à cause du manque de documentation ... Ce que vous devez faire, c'est ajouter une fonction de rappel à addGraph (). Notez également le d3.selectAll () au lieu de d3.select ().

Bonne chance.

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

Je viens de découvrir que cela fonctionne aussi bien (du moins pour les graphiques à plusieurs barres): 

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

Je devais regarder la source dans src/multibar.js pour le savoir; comme il est là, je suppose que c’est ainsi que cela était prévu. Cependant, je partage ce que Alex a dit dans sa réponse: le manque de documentation pour NVD3 est un très gros inconvénient. Ce qui est dommage car l’idée générale du projet est géniale: nous donner le pouvoir de D3 sans entrer dans les détails ...

39
wexman

Il y a trois points clés ici.

1) Aucune documentation ne signifie que vous devez passer par le code source.

2) Tous les graphiques ont une info-bulle, ce qui signifie que des événements sont déjà déclenchés dans le code source.

3) Utilisez l'objet de configuration (dans la documentation) en tant que feuille de route du code source.

c'est à dire.

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

Ouvrez le fichier nvd3/nv.d3.js

CTRL + F + le type de graphique. Dans ce cas, il s'agit de 'multiChart'.

Vous verrez nv.models.multiChart.

Faites défiler la liste pour trouver les événements de l’info-bulle et la documentation nécessaire.

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

Par conséquent, pour écrire votre propre événement ...

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

Si vous utilisez AngularJS, utilisez ce code dans votre app.js.

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

Cela a fonctionné pour moi . https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

Utilisez simplement console.log (e) au lieu de console.log (e.data) pour éviter les erreurs non définies.

2
Disha teli

Cela a fonctionné pour moi: (e.target. data affiche les attributs de données attachés à cet élément, comme x, y)

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

Ce blog de coderwall nous dirige dans la bonne direction.

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

1
Arvind Chinniah

jQuery rend cela facile:

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

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

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

Cela fonctionnerait très bien pour le graphique à secteurs. De même, vous pouvez utiliser d'autres graphiques également ....

0
itsaruns

Pour le graphique en aires empilées, vous devez désactiver interactiveGuideline et utiliser elementClick.area:

chart.useInteractiveGuideline(false);

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