nvd3.js: impossibile associare l'evento onClick con i punti dati nello svg

Question

Sto tentando di associare i punti dati con l'evento onclick, in modo da poter visualizzare una casella di sovrapposizione con alcuni dettagli e collegamenti aggiuntivi. Sto usando la classe .nv-point per accedere ai datapoint. Il problema è che non riesco a registrare l'evento onclick su quei datapoint.

Ecco il codice:

d3.selectAll(".nv-point").on("click",function(){ 
    alert("clicked"); 
    //do something more 
}); 

Ecco la demo in jsFiddle

Answer 1

La trama linea è realizzata con linee in formato SVG, che hanno classe nv-line. Una forchetta dell'originale jsFiddle è qui: http://jsfiddle.net/pnavarrc/qzwkn/1/

d3.selectAll(".nv-line").on("click", function() { 
    alert("clicked"); 
}); 

Se avete voglia di avere uno sguardo al codice sorgente di nvd3:

• https://github.com/novus/nvd3/blob/master/src/models/lineChart.js
• https://github.com/novus/nvd3/blob/master/src/models/line.js

Answer 2

Puoi associare facilmente un gestore di clic al "cerchio" o al punto di nodo su un grafico a linee come questo:

chart.lines.dispatch.on('elementClick', function(e) { 
    alert("You've clicked on " + e.series.key + " - " + e.point.x); 
}); 

Nell'esempio precedente, questo mostrerà la Chiave (della linea) e il valore esatto x del nodo su cui si è fatto clic. Trovo molto utile impostare un punto di interruzione sulla linea di avviso e, utilizzando gli strumenti di sviluppo Chrome/FF/etc, ispezionare l'oggetto e in modo da poter vedere esattamente quali dati sono disponibili e come accedervi.

Answer 3

Dopo molte futzing intorno, questo sembra funzionare per me:

d3.select("#mainGraph svg").selectAll(".nv-point").style("pointer-events", "all").on("click", function(e) { console.log(JSON.stringify(e)); }); 

In sostanza, la differenza tra quello che ho fatto e quello che si cerca in origine è solo il ripristino sovrascrivendo il foglio di stile per accendere puntatore-eventi , ovvero style ("pointer-events", "all"). `

Answer 4

Si potrebbe semplicemente aggiungere l'argomento, che lo collegherà al punto dati. Nel mio caso, stavo provando a collegamento ipertestuale per ogni punto di dati. Gli argomenti hanno un valore passato, che può essere utilizzato per aggiornare il collegamento ipertestuale secondo i requisiti.

d3.selectAll(".nv-point").on("click", function (e) {  

alert(e[0].values[0]); 
});