D3.js, necessario evento click in d3.js

Question

Sto cercando di creare un grafico a bolle, nel senso che se clicco su una bolla, il titolo della bolla dovrebbe apparire nella console. Ho provato alcuni modi, ma non ha avuto successo.

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

mi serve il titolo di cerchio da stampare Aiutateci !!!

Answer 1

avete avuto la buona idea utilizzando la funzione on("click", ...). Tuttavia vedo due cose:

• Il primo problema è che non si chiama la funzione sull'evento click, ma il suo valore. Quindi, scrivi dot.on("click", click()); invece di dot.on("click", click);. Per capire la differenza, immaginiamo che la funzione click abbia bisogno di un argomento, che rappresenterebbe ad esempio il punto interessante, quale sarebbe? Beh, si potrebbe scrivere il seguente:

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

  che equivale (e meno soggetto a errori) alla scrittura:

  dot.on("click", click) 
  

• Ora, il secondo punto è che, in effetti si vuole passare il nodo come argomento della funzione click. Fortunatamente, con l'evento on, come ho usato nel mio esempio, la funzione click viene chiamata con l'argomento d che rappresenta i dati di dot. Così ora è possibile scrivere:

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

  Nota: è possibile utilizzare anche un altro argomento scrivendo function click(d,i) con i che rappresenta l'indice nella matrice, vedere la documentation per maggiori dettagli.

Answer 2

Se si dispone di un titolo sui dati,

dot.on('click' , function(d){ console.log(d.title); });