D3.js使用csv文件中的數據填充svg地圖

Question

我有一個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") 

    }); 

Answer 1

可以使用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>