D3.js，需要d3.js中的点击事件 [英] D3.js, Need click event in d3.js

问题描述

我想创建一个气泡图，如果我点击一个气泡，气泡的标题应该出现在控制台中。我尝试了一些方法，但不成功。

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

我需要打印的圈子标题
请帮助!!!

I need the title of circle to be printed Please help!!!

推荐答案

使用 on（click，...） $ c>函数。但我看到两件事：

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

• 第一个问题是你不调用click事件的函数， 。所以，你写 dot.on（click，点击（））; 而不是 dot.on / code>。为了理解差异，让我们假设函数click需要一个参数，例如代表有趣的点，它会是什么？好吧，你会写下面的：

• 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)

现在，第二点是，确实要将节点作为函数 click 的参数传递。幸运的是，使用 on 事件，如我在示例中使用的，函数click使用参数 d 表示 dot 的数据。因此，您现在可以写：

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
}

注意：你也可以使用另一个参数通过使用 i 写入表示数组中索引的函数click（d，i） https://github.com/d3/d3-selection/blob/master/README.md#selection_on =nofollow noreferrer>文档了解详情。

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，需要d3.js中的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！