使用 d3.js 创建下拉菜单答案

【问题标题】：Creating a drop down with d3.js使用 d3.js 创建下拉菜单
【发布时间】：2015-11-18 10:15:16
【问题描述】：

我在stackoverflow answer 之后使用 d3.js 创建一个下拉列表，但它创建了多个下拉菜单，而不是只创建一个。与所有的价值观。我该如何解决？

这是我的代码：

function checkIt(data) {
    var dispatch = d3.dispatch("load", "statechange");
    var countriesByName = d3.nest()
        .key(function (d) {
        return d.Country_Names;
    })
        .entries(data);


    //console.log(countriesByName)
    var data = JSON.stringify(countriesByName)
    var data = JSON.parse(data);

    function mydropDown(data) {
        for (var i in data) {
            var country = []
            country.push(data[i].key)

            var dropDown = d3.select("#dropdown_container")
                .append("select")
                .attr("class", "selection")
                .attr("name", "country-list");
            var options = dropDown.selectAll("option")
                .data(data)
                .enter()
                .append("option");
            options.text(function (d) {
                return d.country;
            })
                .attr("value", function (d) {
                return d.country;
            });
        };
    }
    mydropDown(data);
};


d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);

【问题讨论】：

在循环外创建选择，并将其填充到循环中。
@Tdelang 做到了，但它仍然不会在下拉列表中显示国家/地区名称jsfiddle.net/1dtr3ht3/22
你非常接近。我们只需要将下拉分配移出forjsfiddle.net/j9w1wa9j
@LUISPEREIRA 是的，我想知道为什么下拉菜单在我们添加文本时仍然空白，即 .text(function (d) { return d.country; })跨度>
这是一个更简单的解决方案，假设你的 json 结构如下。jsfiddle.net/j9w1wa9j/3

标签： javascript jquery json d3.js

【解决方案1】：

请看：

Fiddle

这是更新后的代码：

function checkIt(data) {
  console.log("Checking It!")
  //var dispatch = d3.dispatch("load", "statechange");
  //Get Countries
  var countriesByName = d3.nest()
    .key(function(d) {
      return d.Country_Names;
    })
    .entries(data);
  //console.log(countriesByName)
  var data = JSON.stringify(countriesByName)
  //console.log(data);
  var data = JSON.parse(data);
  //console.log(data);

  function mydropDown(data) {
    //console.log(data);
    var country = [];
    for (var i in data) {
      country.push(data[i].key);
    };
    //console.log(country);

    var dropDown = d3.select("#dropdown_container")
      .append("select")
      .attr("class", "selection")
      .attr("name", "country-list");
    var options = dropDown.selectAll("option")
      .data(data)
      .enter()
      .append("option");
    options.text(function(d) {
        return d.key;
      })
      .attr("value", function(d) {
        return d.values;
      });
  }


  mydropDown(data);
};

//https://github.com/d3/d3-3.x-api-reference/blob/master/Requests.md#d3_json
console.log("D3 Version: " + d3.version);

d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);

#dropdown_container {
  width: 50%;
}

.selection {
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
<div id="dropdown_container"></div>
<div id="left"></div>

【讨论】：