javascript 使用 CSV 文件填充下拉列表 - d3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24588883/
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
Populate Dropdown list with CSV file - d3
提问by user3246812
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.
我想用 csv 文件中存在的值填充 html 中的简单下拉列表。我尝试类似的东西，但它不起作用。
<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>
What should I change?
我应该改变什么？
thank you
谢谢
回答by Tim Cooper
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"You must use a field name when accessing the data in the
attrandtextfunctions. Using the above CSV file, you would used.valueandd.label.
d3.csv使用 CSV 文件的第一行作为列名。您应该确保您的 CSV 文件如下所示：value,label 1,"Item 1" 2,"Item 2" 3,"Item 3"访问
attr和text函数中的数据时必须使用字段名称。使用上述 CSV 文件，您将使用d.value和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>
回答by Harshal
// just declare the d3 js path and put the following code in script tag,
// change the 'billedTo_list' to your p tag as in below code of HTML.
<!-- HTML code for select box to populate start here -->
<table class="seller-desc reciever-desc">
<tr>
<td colspan="2">
<address>
<p class="billedTo_list">Billed To</p>
</address>
</td>
</tr>
<tr>
<td colspan="2">
<span class="to-addres"><input id="name" class="billed_firm" type="text" contenteditable value="M/S."></span>
<span class="to-addres"><input id="name" class="billed_address1" type="text" contenteditable value="Address : "></span><br>
<span class="to-addres"><input id="name" class="billed_address2" type="text" contenteditable value=""></span><br>
<span class="to-addres"><input id="name" class="billed_phno" type="text" contenteditable value="Ph. No. : "></span><br>
<span class="to-addres"><input id="name" class="billed_gstin" type="text" contenteditable value="GSTIN No. : "></span><br>
</td>
</tr>
</table>
<!-- HTML code for select box to populate ends here -->
<!-- javascript code for select box to populate start here -->
// select the place where you want to add your select box
var body = d3.select("p.billedTo_list");
// add the select box dynamically to the div or any element of html
var menu = body.append("select");
// pass the csv file name here, it may cause error for direct accessing file install the plugin for chrome for external url access
d3.csv("example.csv", function(d) {
return {
rank : d.rank,
place : d.place,
population : d.population,
lat : d.lat,
lon : d.lon
};
}, function(data) {
menu.selectAll("foo")
.data(data)
.enter()
.append("option")
.attr("value", d=>d.place)
.text(d=>d.place);
// on change select box it will show the related values
menu.on("change", function() {
var selected_value = $('.billedTo_list select').val();
$.each( data, function( key, value ) {
if(value.place == selected_value) {
$('.billed_name').val('M/S. ' + value.place);
$('.billed_address').val('Address : ' + value.population);
$('.billed_phno').val('Ph. No. : ' + value.lat);
$('.billed_gstin').val('GSTIN No. : ' + value.lon);
}
});
});
});
<!-- javascript code for select box to populate start here -->
