d3.js Update Balkendiagramm Tooltip mit Tasten

Question

Ich versuche, vier Balkendiagramme mit Tasten zu klassifizieren, die ich anzeigen möchte. Alles funktioniert im Allgemeinen gut, wie Sie in meinem code sehen können. Nun habe ich jedoch versucht, Tooltips [hier] [2] hinzuzufügen und erkannte, dass die Daten nicht für jedes Diagramm aktualisiert werden. Weiß jemand wie ich das machen könnte? Ich dachte, auf if-else-Anweisungen auf var Spitze implementieren die richtige Taste, so zu wählen:

var tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d) {                    

      if(d3.select("#propertyCategory")) 
         return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d.vacant + "</strong>"; 
               }) 

Aber es funktioniert nicht und ehrlich gesagt verstehe ich nicht, wie Auswahlen richtig in diesen umgesetzt werden könnten Fall, ich bin irgendwie noobie in d3.js, also weiß ich nicht, was getan werden könnte, um das zu beheben.

Answer 1

Mai werden Sie eine Variable

var selected = "ano2009";//set it to default value 

Jetzt haben kann, wann immer das Jahr geändert wird, um die ausgewählte Variable ändern.

So:

d3.select("#vacant") 
    .on("click", function() { 
     selected = "vacant"; 
     //Update scale domain 

So:

d3.select("#totalUnits") 
     .on("click", function() { 
      selected = "totalUnits"; 

... so weiter

nun in der Spitze Funktion können Sie tun:

var tip = d3.tip() 
                .attr('class', 'd3-tip') 
                .offset([-10, 0]) 
                .html(function(d) { 

//note d[selected] will select the clicked year data.             
    return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d[selected] + "</strong>"; 
                }) 

Arbeits Code here