title: D3.js, Need click event in d3.js
body: <p>I am trying to make a bubble chart, in that if i click on a bubble, the title of the bubble should appear in the console. I tried some ways, but was not successful.</p>
  
  <pre><code>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&lt;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]);
  }
  }
  });
  </code></pre>
  
  <p>I need the title of circle to be printed
  Please help!!!</p>