D3.js CSV 파일의 데이터를 사용하여 svg 맵 채우기

Question

각 경로에 class = "county-code - ###"인 svg 맵이 있습니다.

또한 카운티 이름, 카운티 코드 및 카운티 인구가있는 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

당신은 데이터 영역의 이름 (및 ID)를 추가 할 datum 방법을 사용할 수 있습니다. 예 :

<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>