[英]D3.js using data from csv file to populate svg map
我有一個svg映射,每個路徑都有一個class =“ county-code-###”。
還有一個帶有縣名,縣代碼和縣人口的csv文件。
我已開始以下操作,但不確定如何使用來自csv的日期填充正確的路徑。
d3.text("counties.csv", function (datasetText) {
var parsedCSV = d3.csv.parseRows(datasetText);
var sampleHTML = d3.select("div")
.append("div")
.style("")
.style("")
.selectAll("path")
.data(parsedCSV)
.enter().append("path")
});
您可以使用datum
方法將區域名稱(和ID)添加到數據中。 就像是:
<script>
var height = 500;
var width = 700;
// generate a sample 'map'. This svg does not contain the names of the
// regions
var data = [{id:1, x:10, y:10}, {id:2, x:300, y:400}, {id:3, x:600, y:100}];
var vis = d3.select("#vis").append("svg")
.attr("width", width).attr("height", height);
vis.selectAll("rect").data(data).enter().append("rect")
.attr("x", function(d) { return d.x;})
.attr("y", function(d) { return d.y;})
.attr("width", 20).attr("height", 20)
.attr("class", function(d) { return "county-code-" + d.id;});
// Some sample data containing the region names; in this case hard coded,
// but could also be read from a csv file.
var data2 = [{id:1, name:"a"}, {id:2, name:"b"}, {id:3, name:"c"}];
// Add the names to the svg
vis.selectAll("rect").datum(function(d) {
// extract county code from class
var id = +d3.select(this).attr("class").match(/county-code-(\d+)/)[1];
d.id = id;
// look up id in data2; if found add name to datum
for (var i = 0; i < data2.length; i++) {
if (data2[i].id == id) {
d.name = data2[i].name;
break;
}
}
return d;
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.