nvd3.js: nie można powiązać zdarzenia onClick z punktami danych w svg

Question

Próbuję powiązać punkty danych ze zdarzeniem onclick, dzięki czemu mogę wyświetlić pole nakładki z dodatkowymi szczegółami i łączami. Używam klasy .nv-point, aby uzyskać dostęp do punktów danych. Problem polega na tym, że nie jestem w stanie zarejestrować zdarzenia onclick w tych punktach danych.

Oto kod:

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

Oto demo jsFiddle

Answer 1

Działka linia jest wykonana z liniami SVG, które mają klasę NV-linię. Widelec z oryginalnego jsFiddle jest tutaj: http://jsfiddle.net/pnavarrc/qzwkn/1/

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

Jeśli masz ochotę spojrzeć na kodzie źródłowym 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

Można można łatwo dołączyć moduł obsługi kliknięcia do "okręgu" lub punktu węzła na linii "Tak":

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

W powyższym przykładzie pokaże się klucz (linii) i dokładna wartość x węzła, który kliknąłeś. Bardzo pomocne jest ustawienie punktu przerwania w linii alertu i używanie narzędzi dla programistów Chrome/FF/etc, sprawdzenie obiektu e, aby zobaczyć dokładnie, jakie dane są dostępne i jak uzyskać do niego dostęp.

Answer 3

Po wielu futzing wokół, to wydaje się działać dla mnie:

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

Zasadniczo różnica między tym, co robiłem i co początkowo stara się tylko resetowanie przesłanianie stylów, aby włączyć wskaźnik-events , tzn. styl ("wskaźnik zdarzenia", "wszystkie"). "

Answer 4

Można dodać argument, który połączy go z punktem danych. W moim przypadku próbowałem utworzyć hiperłącze dla każdego punktu danych. Argumenty mają wartość przekazaną, która może służyć do aktualizacji hiperłącza zgodnie z wymaganiem.

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

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