D3.js创建多个下拉选择框时如何设置页面加载默认选中值

问题场景 #

使用D3.js批量创建多个下拉选择框时，需要实现页面加载完成后默认选中指定选项：第一个下拉框默认选中Horse，第二个下拉框默认选中Cow，第三个下拉框默认选中Fox。现有代码在配置option的selected属性时，无法获取当前option所属父下拉框绑定的默认选中值，无法完成选中逻辑判断。

原始核心代码：

let widgetContainer = d3.select('#dropdowns')
  let animalNames = ["Horse", "Dog", "Cow", "Fox", "Cat", "Pig", "Aardvark", "Baboon", "Elephant"]
  let selectedNames = ["Horse", "Cow", "Fox"]
  let dropdowns = widgetContainer
    .selectAll(".widget-select")
    .data(selectedNames)
    .join("select")
    .attr("id", (d, idx) => `select-${idx}`)
    .attr("class", "animal-select")
    .on("change", (animalName, idx, selectElements) => {
      let selectedValues = selectElements.map((elem) => elem.value);
      // 选中后触发图表渲染逻辑
      onAnimalSelect(selectedValues);
    });

  let options = dropdowns
    .selectAll("option")
    .data(animalNames)
    .join("option")
    .property("selected", (opt) => {
      // 此处无法获取父下拉框的默认值完成判断
    })
    .attr("value", (opt) => opt)
    .text((opt) => opt);

实现方案 #

方案1：直接给select元素赋值（性能最优） #

select元素本身支持直接设置value属性，只要option列表中存在对应value的选项，浏览器会自动将匹配的选项设为选中状态，不需要手动给单个option加selected属性。
只需要保留原有select、option渲染逻辑，在option渲染完成后加一行赋值代码即可：

// option渲染逻辑保持不变，新增下面这行代码即可完成默认选中
dropdowns.property("value", d => d);

该方案没有额外的DOM查询开销，代码最简洁。

方案2：option渲染阶段匹配父节点数据 #

如果需要在option渲染时直接设置selected属性，注意不要用箭头函数写属性回调（箭头函数会改变this指向，无法拿到当前DOM节点），通过当前option节点获取父级select绑定的默认值做匹配即可：

let options = dropdowns
  .selectAll("option")
  .data(animalNames)
  .join("option")
  // 用普通函数写回调，保证this指向当前option DOM节点
  .property("selected", function(opt) {
    // 获取父级select节点绑定的默认值
    const parentDefaultValue = d3.select(this.parentNode).datum();
    return opt === parentDefaultValue;
  })
  .attr("value", (opt) => opt)
  .text((opt) => opt);

内容的提问来源于stack exchange，提问作者Denise Mauldin