Question

我有一个d3气泡图，按计数显示名称。我正在尝试添加一个输入框，以便用户可以搜索特定名称以突出显示相应的气泡，以及将名称和计数显示为文本。我按名称嵌套数据，但现在我似乎无法访问嵌套数据中的计数值，因此当在输入框中输入名称时，它只返回键并且计数为“未定义” 。 Here是代码。这就是我遇到问题的地方：

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>");

};

d3：搜索输入以返回嵌套数据值

1 个答案: