如何使用 D3 设置出现在下拉列表中的默认值？

Question

与此问题类似，我正在尝试使用 D3 设置下拉列表的选定值。 我试图在那个问题中复制 gvien 的答案。 我的示例中的唯一区别（我可以看到）是下拉选项 'value' 和 'text' 属性不同并且由数组填充。 设置该值的函数似乎是错误的function(d){return d === chosenCountry}但我不知道合适的函数应该是什么。

          var chosenCountry = BF";
          var countryList = [[ 1, "BW", "Botswana"], [ 2, "BF", "Burkina Faso"],[ 3, "CV", "Cabo Verde"],[ 4, "CM", "Cameroon"],[ 5, "CG", "Congo"]];

          var dropdown = d3.select('#dropDown')
            .insert("select", "svg")
            .attr('id', 'dropDownId');

          var options = dropdown.selectAll('option')
            .data(countryList)
            .enter()
            .append('option')
            .attr('value', (d) => d[1])
            .text((d) => d[2]);

          options.property("selected", function(d){return d === chosenCountry});

Answer 1

您的数据是一个数组数组，其中 2 个字母的国家/地区代码（可能是 ISO alpha-2）是每个内部数组中的第二项。 因此，您只需要正确的索引：

options.property("selected", function(d) {
    return d[1] === chosenCountry
});

这是演示：

 var chosenCountry = "BF"; var countryList = [ [1, "BW", "Botswana"], [2, "BF", "Burkina Faso"], [3, "CV", "Cabo Verde"], [4, "CM", "Cameroon"], [5, "CG", "Congo"] ]; var dropdown = d3.select("body") .append("select") .attr('id', 'dropDownId'); var options = dropdown.selectAll('option') .data(countryList) .enter() .append('option') .attr('value', (d) => d[1]) .text((d) => d[2]); options.property("selected", function(d) { return d[1] === chosenCountry });

 <script src="https://d3js.org/d3.v5.min.js"></script>