使用CSV文件填充下拉列表 - d3
[英]Populate Dropdown list with CSV file - d3
問題描述
我想在html中填充簡單的下拉列表，其中的值存在於csv文件中。 我嘗試過類似的東西，但它不起作用。
<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>
我應該改變什么？
謝謝
2 個解決方案
解決方案1
7 已采納 2014-07-05 17:47:22
d3.csv使用CSV文件的第一行作為列名。 您應該確保您的CSV文件類似於以下內容：value,label 1,"Item 1" 2,"Item 2" 3,"Item 3"訪問
attr和text函數中的數據時，必須使用字段名稱。 使用上面的CSV文件，您將使用d.value和d.label。
以下是您應該能夠使用並根據需要進行調整的代碼的更新版本：
<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>
解決方案2
0 2017-07-26 12:36:47
// 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 -->
讀取巨大的csv文件，並使用d3在Javascript中填充地圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.