填充具有CSV文件的下拉列表 - d3 [英] Populate Dropdown list with CSV file - d3
问题描述
我想在html中填入简单的下拉列表，
使用csv文件中的值。
我尝试这样的，但它不工作。
I want to populate simple drop down list in html , with values that exist in csv file. I try something like that , but it doesn't work.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
d3.csv("valuesforDD.csv", function(error, data) {
var select = d3.select("body")
.append("div")
.append("select")
select.selectAll("option")
.data(data)
.enter().append("option")
.attr("value", function (d) { return d; })
.text(function (d) { return d; });
}
</script>
</html>
我应该更改什么？
谢谢
推荐答案
-
d3.csv使用CSV文件的第一行作为列名称。您应该确保您的CSV文件看起来像下面这样：
d3.csvuses the first line of the CSV file as the column names. You should make sure your CSV file looks something like the following:
value,label
1,"Item 1"
2,"Item 2"
3,"Item 3"
您必须在访问 attr 和 text 函数。使用上述CSV文件，您将使用 d.value 和 d.label 。
You must use a field name when accessing the data in the attr and text functions. Using the above CSV file, you would use d.value and d.label.
这是您应该能够根据需要使用和调整的代码的更新版本：
Here is an updated version of your code that you should be able to use and adapt as needed:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
d3.csv("valuesforDD.csv", function(error, data) {
var select = d3.select("body")
.append("div")
.append("select")
select
.on("change", function(d) {
var value = d3.select(this).property("value");
alert(value);
});
select.selectAll("option")
.data(data)
.enter()
.append("option")
.attr("value", function (d) { return d.value; })
.text(function (d) { return d.label; });
});
</script>
</body>
</html>
这篇关于填充具有CSV文件的下拉列表 - d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
