अटैच किया जा रहा 'onclick' डी 3 चार्ट पृष्ठभूमि

Question

को घटना मैं एक डी 3 हिस्टोग्राम चार्ट है, जो पर मैं सलाखों के लिए एक 'onclick' घटना संलग्न किया है। मैं चार्ट की पृष्ठभूमि में एक 'ऑनक्लिक' ईवेंट भी संलग्न करना चाहता हूं (यानी चार्ट में हर जगह जो बार नहीं है), लेकिन मुझे इससे परेशानी हो रही है। मैं कई तरह से घटना संलग्न की कोशिश की है, लेकिन हर मामले में, इस नई घटना मेरी ओवरराइड करने के लिए लगता है बार-क्लिक करें:

कुछ प्रयास:

$("svg:not('.bar')").on("click", function(){ //do stuff }); 

$("g:not('.bar')").on("click", function(){ //do stuff }); 

var svg = d3.select("#histogram_block").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .on("click", function(d,i){ 
      if (d) { //do stuff} 
      else { //do stuff } 
     }; 

मैं यह सोचते हैं रहा हूँ वहाँ डालने का एक तरीका है एसवीजी ऑब्जेक्ट को इवेंट हैंडलर शुरू होने पर, लेकिन मुझे इसके बारे में जाने का सही तरीका नहीं पता है।

Answer 1

घटना वास्तव में ओवरराइड नहीं है, लेकिन दोनों ट्रिगर हैं - onclick एसवीजी के लिए हैंडलर और बार के लिए हैंडलर। इसे रोकने के लिए, .stopPropagation() विधि का उपयोग करें (the documentation देखें)। कोड इस तरह दिखता है:

rect.on("click", function() { 
    console.log("rect"); 
    d3.event.stopPropagation(); 
}); 

पूर्ण उदाहरण here। घटना here के प्रचार को रोकने के साथ व्यवहार के साथ तुलना करें।

Answer 2

इस उदाहरण में (लाइन 246: http://tributary.io/inlet/8361294) मैं कुल चार्ट क्षेत्र के बराबर & ऊंचाई के साथ एक नया रेक्ट जोड़ता हूं, फिर मेरे माउस (या क्लिक) ईवेंट संलग्न करता है।

svg.append("rect") 
     .attr({"class": "overlay" , "width": width , "height": height}) 
     .on({ 
      "mouseover": function() { /* do stuff */ }, 
      "mouseout": function() { /* do stuff */ }, 
      "click": function() { /* do stuff */ }, 
     });