D3.js, Need click event in d3.js

Question

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. ``` 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…

Accepted Answer

You had the good idea by using the `on("click", ...)` function. However I see two things:

The first problem is that you don't call the function on the click event but its value. So, you write `dot.on("click", click());` instead of `dot.on("click", click);`. To understand the difference, let's imagine that the function click needs one argument, which would for example represent the interesting dot, what would it be? Well, you would write the following:

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

Which is equivalent (and less prone to errors) to writing:

```
dot.on("click", click)
```

Now, the second point is that, indeed you want to pass the node as an argument of the function `click`. Fortunately, with the `on` event, as I used in my example, the function click is called with the argument `d` which represents the data of `dot`. Thus you can now write:

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

Note: you can also use another argument by writing `function click(d,i)` with `i` representing the index in the array, see the documentation for more details.

D3.js, Need click event in d3.js

Solution

Problem