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", ...)関数を使用して良いアイデアを思いつきました。ただし、次の 2 つのことがわかります。

  • 最初の問題は、クリック イベントで関数を呼び出すのではなく、その値を呼び出すことです。dot.on("click", click());の代わりに書きますdot.on("click", click);。違いを理解するために、関数 click に 1 つの引数が必要であると想像してみましょう。これは、たとえば、興味深いドットを表します。それは何でしょうか? さて、あなたは次のように書くでしょう：

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

    これは、次のように書くことと同等です (そしてエラーが発生しにくい):

    dot.on("click", click)

  • さて、2番目のポイントは、実際にはノードを関数の引数として渡したいということです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)して、別の引数を使用することもできます。詳細については、ドキュメントを参照してください。i

于 2013-03-20T07:32:27.200 に答える
1

データにタイトルがある場合は、

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