d3: Sucheingabe, um verschachtelten Datenwert zurückzugeben

Question

Ich habe eine d3 Blasendiagramm zeigt Namen nach Anzahl. Ich versuche, ein Eingabefeld hinzuzufügen, so dass ein Benutzer nach einem bestimmten Namen suchen kann, um die entsprechende Blase hervorzuheben, sowie den Namen und die Anzahl als Text anzuzeigen. Ich habe die Daten nach Namen verschachtelt, aber jetzt scheint es nicht möglich zu sein, auf den Zählwert in den verschachtelten Daten zuzugreifen. Wenn also ein Name in das Eingabefeld eingegeben wird, gibt er nur den Schlüssel zurück und der Zähler ist "undefiniert" . Here ist der Code. Und das ist, wo ich ein Problem habe:

d3.select("#userInput").on("keyup", search); 

function search(value, d) { 
    var input = this.value.toUpperCase(); 
    var name = d.key; 
    var name = input; 

    var count = d.Count; 

    circles.classed("circle-hover", function(d) { 
     return name == d.Name; 
    }); 

    d3.select("#text").html("<h2>" + name + "</h2><br /><h4>" + count + " names found</h4>"); 
}; 

Answer 1

function search(value, d) { 
    var input = this.value.toUpperCase(); 
    var count = 0; 
    var element = svg.selectAll(".circle") 
    .filter(function(d){ return d.Name === input}) 
    .each(function(d, i){ 
    count += d.Count; 
    }); 
    var name = input; 

    var self = d3.select(this), 
    rects = d3.selectAll(".symbols>div>svg>circle"); 

    rects.each(function(){ 
     var r = d3.select(this); 
     if (r.style("stroke") === self.style("stroke")){ 
      r.style({ "stroke": "red", "stroke-width": "3px" }); 
     } 
    }); 

    circles.classed("circle-hover", function(d) { 
     return name == d.Name; 
    }); 

    d3.select("#text").html("<h2>" + name + "</h2><br /><h4>" + count + " names found</h4>"); 

};