कैसे nvd3.js ग्राफ

Question

पर एक क्लिक घटना जोड़ने के लिए मैं nvd3.js का उपयोग कर रहा है और एक क्लिक करें घटना

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

JSFiddle

मैं ऐसा कैसे कर सकते हैं जोड़ने की कोशिश कर?

Answer 1

मैं एक ही मुद्दे पर चल रहा था और दस्तावेज की कमी के कारण सभी को एनवीडी 3 को डंप करने वाला था ... आपको क्या करना है, addGraph() में कॉलबैक फ़ंक्शन जोड़ना है। D3.selectAll() के बजाय d3.selectAll() को भी नोट करें।

गुड लक।

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

यह मेरे लिए काम किया:

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

Answer 3

बस पता चला कि यह रूप में अच्छी तरह से काम करता है ((। E.target डेटा डेटा विशेषताओं एक्स की तरह, उस तत्व से जुड़ी, वाई आउटपुट) कम से कम के लिए multibar चार्ट):

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

मैं src/multibar.js पता लगाने के लिए में स्रोत को देखने के लिए था, चूंकि यह वहां है, मुझे लगता है कि यह वही तरीका है जिसका इरादा किया जाना था। हालांकि, मैंने जवाब दिया कि एलेक्स ने अपने जवाब में क्या कहा: एनवीडी 3 के लिए दस्तावेज़ीकरण की कमी वास्तव में एक बड़ा नुकसान है। कौन सा दुख की बात है बहुत अच्छा है क्योंकि परियोजना के सामान्य विचार: हमें सभी विवरण में जाने के बिना डी 3 की शक्ति दे रही है ...

Answer 4

jQuery इस आसान बनाता है:

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

फिडल @http://jsfiddle.net/eTT5y/1/

Answer 5

AngularJS का उपयोग कर

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

यह पाई चार्ट के लिए ठीक काम करेगा, इसी तरह यू अन्य चार्ट भी के लिए आगे बढ़ो कर सकते हैं ....

Answer 6

, अपनेमें इस कोड का उपयोग।

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

Answer 7

स्टैक्ड क्षेत्र चार्ट के लिए, आप interactiveGuideline अक्षम करें और elementClick.area उपयोग करना चाहिए:

chart.useInteractiveGuideline(false); 

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

Answer 8

This coderwall blog सिर हमें सही दिशा।

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

Answer 9

यह मेरे लिए काम किया। https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

अपरिभाषित त्रुटि से बचने के लिए बस console.log (e.data) के बजाय console.log (e) का उपयोग करें।

Answer 10

यहां तीन मुख्य बिंदु हैं।

1) कोई दस्तावेज नहीं है कि आपको स्रोत कोड से गुजरना है।

2) सभी ग्राफों में टूलटिप होता है, जिसका अर्थ है कि ईवेंट पहले ही स्रोत कोड में फायरिंग कर रहे हैं।

3) स्रोत कोड के सड़क मानचित्र के रूप में कॉन्फ़िगरेशन ऑब्जेक्ट (दस्तावेज़ीकरण में) का उपयोग करें।

यानी।

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

ओपन nvd3/nv.d3.js फ़ाइल

CTRL + F + चार्ट प्रकार। इस मामले में यह 'बहुआयामी' है।

आप nv.models.multiChart देखेंगे।

टूलटिप ईवेंट ढूंढने के लिए नीचे स्क्रॉल करें और आपको आवश्यक दस्तावेज़ मिलेंगे।

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

इसलिए, अपनी खुद की घटना लिखने के लिए ...

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