Javascript 如何设置默认选项d3.js

我的绘图中有一个下拉列表，用于选择用户要显示的点。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;})

---

您可以这样做：

在下面的函数中移动过滤圆的零件

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

工作代码

希望这有帮助

对于

下拉列表.node（）

它返回什么？对于

selection.node（）

它声明将返回当前选择中的第一个非空元素。从控制台日志中可以看到