Wie ein Click-Ereignis auf nvd3.js Graph hinzuzufügen

Question

ich nvd3.js bin mit und versuchen, ein Click-Ereignis

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

JSFiddle

hinzufügen Wie kann ich das tun?

Answer 1

Ich stieß auf das gleiche Problem und war dabei, NVD3 wegen des Mangels an Dokumentation alle zusammen zu dumpen ... Was Sie tun müssen, ist eine Callback-Funktion addGraph() hinzufügen. Beachten Sie auch d3.selectAll() anstelle von d3.select().

Viel Glück.

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

Answer 2

Diese für mich gearbeitet: (. E.target Daten gibt die Datenattribute auf dieses Element befestigt ist, wie x, y)

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

Answer 3

gerade herausgefunden, dass dies auch funktioniert (zumindest für Multibar Grafik):

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

hatte ich an der Quelle in src/multibar.js suchen, um herauszufinden; da es da ist, denke ich, dass es so ist, wie es beabsichtigt war. Ich wiederhole jedoch, was Alex in seiner Antwort gesagt hat: Der Mangel an Dokumentation für NVD3 ist ein wirklich großer Nachteil. Welches ist traurig, weil die allgemeine Idee des Projekts ist groß: uns die Kraft von D3 geben, ohne alle gehen in die Details ...

Answer 4

jQuery so einfach macht:

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

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

Answer 5

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

Dies würde für das Kreisdiagramm gut funktionieren, geht u kann in ähnlicher Weise vor für zu anderen Charts ....

Answer 6

AngularJS Wenn verwenden, verwenden Sie diesen Code in Ihrem app.js.

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

Answer 7

Für gestapelte Flächendiagramm, sollten Sie interactiveGuideline deaktivieren und elementClick.area verwenden:

chart.useInteractiveGuideline(false); 

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

Answer 8

This coderwall blog Köpfe uns die richtige Richtung.

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

Answer 9

Das ist für mich gearbeitet. https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

Verwenden Sie einfach console.log (e) anstelle von console.log (e.data), um undefinierten Fehler zu vermeiden.

Answer 10

Hier gibt es drei wichtige Punkte.

1) Keine Dokumentation bedeutet, dass Sie durch den Quellcode gehen müssen.

2) Alle Graphen haben einen Tooltip, was bedeutet, dass Ereignisse bereits im Quellcode ablaufen.

3) Verwenden Sie das Konfigurationsobjekt (in der Dokumentation) als Straßenkarte des Quellcodes.

dh.

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

öffnen nvd3/nv.d3.js Datei

STRG + F + der Diagrammtyp. In diesem Fall ist es "MultiChart".

Sie werden nv.models.multiChart sehen.

Scrollen Sie nach unten, um die Tooltip-Ereignisse zu finden, und Sie finden die benötigte Dokumentation.

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

daher Ihre eigene Veranstaltung zu schreiben ...

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