Javascript 使用d3.js创建下拉列表

下面我使用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);

请看:

以下是更新后的代码：

功能检查（数据）{
log（“检查它！”）
//var调度=d3.调度（“负荷”、“状态变化”）；
//得到国家
var countriesByName=d3.nest（）
.键（功能（d）{
返回d.国家/地区名称；
})
.条目（数据）；
//console.log（countriesByName）
var data=JSON.stringify（countriesByName）
//控制台日志（数据）；
var data=JSON.parse（数据）；
//控制台日志（数据）；
函数mydropDown（数据）{
//控制台日志（数据）；
var国家=[]；
用于（数据中的var i）{
country.push（数据[i].key）；
};
//控制台日志（国家）；
var dropDown=d3.选择（#dropDown_container）
.append（“选择”）
.attr（“类”、“选择”）
.attr（“名称”、“国家名单”）；
变量选项=下拉列表。选择全部（“选项”）
.数据（数据）
.输入（）
.附加（“期权”）；
选项.文本（功能（d）{
返回d.key；
})
.attr（“值”，函数（d）{
返回d值；
});
}
我的下拉列表（数据）；
};
//https://github.com/d3/d3-3.x-api-reference/blob/master/Requests.md#d3_json
console.log（“D3版本：+D3.Version”）；
d3.json（“https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json“，请检查）
#下拉#u容器{
宽度：50%；
}
.选择{
宽度：50%；
}

在循环外创建select，并将其填充到循环中。@Tdelang做到了这一点，但它仍然不会在下拉列表中显示国家名称。您很接近了。我们只需要将drowdown赋值移出

@luispreira Yes的

，我想知道为什么在向下拉菜单中添加文本时下拉菜单仍然为空，即text（函数（d）{return d.country；}），这是一个更简单的解决方案，假设您是json，如下结构。