10

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

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

我需要打印圈子的标题请帮忙！！！

4

2 回答 2

23

on("click", ...)通过使用该功能，您有了一个好主意。但是我看到两件事：

  • 第一个问题是您不会在单击事件上调用该函数，而是调用它的值。所以，你写dot.on("click", click());而不是dot.on("click", click);. 为了理解区别，让我们假设函数 click 需要一个参数，例如表示有趣的点，它会是什么？好吧，您将编写以下内容：

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

    这与写作等效（并且不易出错）：

    dot.on("click", click)

  • 现在，第二点是，您确实希望将节点作为函数的参数传递click。幸运的是on，正如我在示例中使用的那样，通过事件，函数 click 被调用，其参数d表示dot. 因此，您现在可以编写：

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

    注意：您也可以通过编写function click(d,i)with 来i表示数组中的索引来使用另一个参数，有关更多详细信息，请参阅文档。

于 2013-03-20T07:32:27.200 回答
1

如果您的数据有标题，

    dot.on('click' , function(d){ console.log(d.title); });
于 2013-03-20T04:35:17.150 回答