Javascript 使用 d3.js 添加下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11903709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding drop down menu using d3.js
提问by shr-
I am trying to add a drop down menu to my d3 visualization. The problem is that the eventlistener does not get invoked on selecting any of the options. Also, how can I access the value of the option selected? Following is a snippet of my code..
我正在尝试向我的 d3 可视化添加下拉菜单。问题是在选择任何选项时不会调用事件侦听器。另外，如何访问所选选项的值？以下是我的代码片段..
d3.text("uniqueTeams.php",function(json){
var dd=JSON.parse(json);
var b= d3.select("#s4").select("#shru");
var u=b.append("select");
var t=u.selectAll("option").data(dd).enter().append("option")
.attr("value",function(d){return d.teamShotID;})
.text(function(d){return d3.select(this).node().__data__.teamShotID;});
t.on("change",change);
});
function change(value)
{
console.log("team",value);
}
change();????
Thankx
谢谢
回答by Wex
You need to add the .on("change")to the selectelement, not the optionelements.
您需要添加.on("change")到select元素，而不是option元素。
var select = d3.select("#shru").append("select").on("change", change),
options = select.selectAll('option').data(dd); // Data join
// Enter selection
options.enter().append("option").text(function(d) { return d.teamShotID; });
The currently selected optionindex is kept in a property called selectedIndexon the selectelement. Selections are arrays, so elements can be accessed directly (e.g., selection[0][0]). Each optionelement will have data bound to it, stored in a property called __data__:
当前选定的option索引保存在元素selectedIndex上调用的属性中select。选择是数组，因此可以直接访问元素（例如，selection[0][0]）。每个option元素都将绑定数据，存储在名为 的属性中__data__：
function change() {
var selectedIndex = select.property('selectedIndex'),
data = options[0][selectedIndex].__data__;
}
Edit: For readability and hopefully to help you understand the code above, I'd like to also include this alternative syntax:
编辑：为了可读性并希望帮助您理解上面的代码，我还想包含以下替代语法：
function change() {
var si = select.property('selectedIndex'),
s = options.filter(function (d, i) { return i === si }),
data = s.datum();
}
回答by daemon
hope this can guide you...
希望这可以指导你...
var dispatch = d3.dispatch("load", "countrychange");
d3.csv("data/ERSreputationBlocked.csv",type, function (error, country) {
if (error) throw error;
var countryById = d3.map();
country.forEach(function (d) { countryById.set(d.id, d); });
dispatch.load(countryById);
dispatch.countrychange(countryById.get("PH"));
//console.log(country);
});
dispatch.on("load.menu", function(countryById) {
var select = d3.select("body")
.append("div")
.append("select")
.on("change", function () { dispatch.countrychange(countryById.get(this.value)); });
select.selectAll("option")
.data(countryById.values())
.enter().append("option")
.attr("value", function (d) { return d.id; })
.text(function (d) { return d.Country; });
dispatch.on("countrychange.menu", function (country) {
select.property("value", country)
//loading the value based on the selected data
var svg1 = d3.select("body").append("svg1")
.attr("width", width)
.attr("height", height)
//end of selection
console.log(country);
});
});
//end of drop down
function type(d) {
d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });
return d;
}
