Question

我正在使用此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);

Answer 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>

使用d3.js创建下拉列表

1 个答案: