nvd3.js: svg

Question

'daki veri noktalarıyla onClick olayına bağlanamıyor Veri noktalarını onclick olayıyla bağlamaya çalışıyorum, böylece bazı ek ayrıntılar ve bağlantılar içeren bir bindirme kutusu görüntüleyebilirim. Veri noktalarına erişmek için .nv-point sınıfını kullanıyorum. Sorun, onclick olayını bu veri noktalarına kaydedemem.

İşte

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

çizgi arsa sınıf nv-çizgi var svg hatları ile yapılır jsFiddle

Answer 1

yılında demo: Burada

kodudur. Orijinal jsFiddle bir çatal buradadır: http://jsfiddle.net/pnavarrc/qzwkn/1/

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

Eğer nvd3 kaynak koduna bir göz olması gibi hissediyorum:

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

Answer 2

yapabilirsiniz Kolayca bir tıklama işleyicisini "daire" ya da bir satırda nokta işareti ekleyin:

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

Yukarıdaki örnekte, bu, Anahtarın (satırın) ve tıklattığınız düğümün tam x değerini gösterecektir. Uyarı satırında bir kesme noktası ayarlamak ve Chrome/FF/etc geliştirici araçlarını kullanmak için çok yararlı buluyorum, e nesnesini inceleyin, böylece hangi verilerin uygun olduğunu ve nasıl erişileceğini tam olarak görebilirsiniz. Çok etrafında futzing sonra

Answer 3

, bu benim için iş gibi görünüyor: Temelde

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

, arasındaki fark ne yaptık ve ne başlangıçta sadece işaretçi-olaylar açmak için stil geçersiz kılma sıfırlıyor çalışır Örneğin, stil ("işaretçi-olayları", "hepsi").

Answer 4

Veri noktasını bağlayacak argümanı ekleyebilirsiniz. Benim durumumda, her bir veri noktası için köprü yapmaya çalışıyordum. Bağımsız değişkenler, gereksinime göre köprüyü güncelleştirmek için kullanılabilecek bir değer geçirmiştir.

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

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