如何設置默認選項d3.js

Question

我在圖中有一個下拉列表來選擇用戶想要顯示的點。 A是綠色的。 B是黃色的，這是我的默認選項。當情節第一次加載時，我只想要在情節中顯示的黃色點。但這裏顯示了數據中的所有要點。誰能告訴我如何解決它？

var defaultOption = ["B"]; 
var dropDown = d3.select("#filter").append("select") 
       .attr("type", "AB") 
       .attr("class","list"); 

var options = dropDown.selectAll("option") 
     .data(d3.map(data, function(d){return d.type;}).keys()) 
     .enter() 
     .append("option") 
     .property("selected", function(d){ 
    return d == defaultOption;}) 
    .text(function (d) { return d; }) 
     .attr("value", function (d) { return d; }); 

    dropDown.on("change", function() { 
    var selected = this.value; 
    displayOthers = this.checked ? "inline" : "none"; 
    display = this.checked ? "none" : "inline"; 

    svg.selectAll(".circles") 
     .filter(function(d) {return selected != d.type;}) 
     .attr("display", displayOthers); 

    svg.selectAll(".circles") 
     .filter(function(d) {return selected == d.type;}) 

Answer 1

你可以做這樣的事情：

此舉過濾器在功能一圈像下面showCircles

showCircles(dropDown.node());//this will filter initially 
dropDown.on("change", function() { 
    showCircles(this);//this will filter the circles on change of select 
}); 
//function to show circles as per the select box 
function showCircles(me){ 
    console.log(me); 
    var selected = me.value; 
    displayOthers = me.checked ? "inline" : "none"; 
    display = me.checked ? "none" : "inline"; 

    svg.selectAll(".circles") 
    .filter(function(d) { 
     return selected != d.type; 
    }) 
    .attr("display", displayOthers); 

    svg.selectAll(".circles") 
    .filter(function(d) { 
     return selected == d.type; 
    }) 
    .attr("display", display); 
} 

工作代碼here

希望這有助於部分！