D3.js, d3.js

Question

में ईवेंट पर क्लिक करने की आवश्यकता है, मैं एक बबल चार्ट बनाने की कोशिश कर रहा हूं, अगर मैं एक बबल पर क्लिक करता हूं, तो बबल का शीर्षक कंसोल में दिखाई देना चाहिए। मैंने कुछ तरीकों की कोशिश की, लेकिन सफल नहीं हुआ।

d3.json("deaths.json", 
function (jsondata) { 

    var deaths = jsondata.map(function(d) { return d.deaths; }); 
var infections = jsondata.map(function(d) { return d.infections; }); 
var country = jsondata.map(function(d) { return d.country; }); 
var death_rate = jsondata.map(function(d) { return d.death_rate; }); 

    console.log(deaths); 
console.log(death_rate); 
console.log(infections); 
console.log(country); 
console.log(date); 

//Making chart 

for (var i=0;i<11;i++) 
{ 
var f; 
var countryname=new Array(); 
var dot = new Array(); 
dot = svg.append("g").append("circle").attr("class", "dot").attr("id",i) 
.style("fill", function(d) { return colorScale(death_rate[i]); }).call(position);  

//adding mouse listeners.... 

dot.on("click", click()); 
function click() 
{ 
    /***********************/ 
console.log(country); //i need the title of the circle to be printed 
    /*******************/ 
    } 

function position(dot) 
{ 
dot .attr("cx", function(d) { return xScale(deaths[i]); }) 
    .attr("cy", function(d) { return yScale(death_rate[i]); }) 
    .attr("r", function(d) { return radiusScale(infections[i]); }); 
dot.append("title").text(country[i]); 
} 
} 
}); 

मैं चक्र के शीर्षक की जरूरत है मुद्रित करने के लिए कृपया मदद !!!

Answer 1

आप on("click", ...) फ़ंक्शन का उपयोग करके अच्छा विचार था। हालांकि मुझे दो चीजें दिखाई देती हैं:

• पहली समस्या यह है कि आप क्लिक ईवेंट पर फ़ंक्शन को कॉल नहीं करते हैं लेकिन इसका मान। तो, आप dot.on("click", click); के बजाय dot.on("click", click()); लिखते हैं। अंतर को समझने के लिए, आइए कल्पना करें कि फ़ंक्शन क्लिक को एक तर्क की आवश्यकता है, उदाहरण के लिए दिलचस्प बिंदु का प्रतिनिधित्व करना होगा, यह क्या होगा? ठीक है, आप लिखते हैं निम्नलिखित:

  dot.on("click", function(d){click(d)}) 
  

  कौन सा लेखन के बराबर (और कम गलतियाँ) है:

  dot.on("click", click) 
  

• अब, दूसरा मुद्दा यह है कि, वास्तव में आप पास करना चाहते है फंक्शन click के तर्क के रूप में नोड। सौभाग्य से, on ईवेंट के साथ, जैसा कि मैंने अपने उदाहरण में उपयोग किया था, फ़ंक्शन क्लिक को d तर्क कहा जाता है जो dot के डेटा का प्रतिनिधित्व करता है। इस प्रकार आप अब लिख सकते हैं:

  dot.on("click", click); 
  function click(d) 
  { 
      console.log(d.title); //considering dot has a title attribute 
  } 
  

  नोट: यदि आप भी i सरणी में सूचकांक का प्रतिनिधित्व करने के साथ function click(d,i) लिख कर एक और तर्क का उपयोग कर सकते हैं, अधिक जानकारी के लिए documentation देखते हैं।

Answer 2

आप अपने डेटा पर एक शीर्षक है, तो

dot.on('click' , function(d){ console.log(d.title); });