D3을 사용하여 기존 SVG 요소를 JSON 데이터로 채우기

Question

달성하고자하는 것은 일련의 JSON 데이터에 따라 색상을 지정할 수있는 여러 개의 다각형이있는 SVG입니다. 거의 다 왔지만 데이터 객체를 SVG 요소와 올바른 순서로 일치시키는 데 문제가 있습니다. 내가 모든 것을 분석하고를 작성 관리했습니다

{ 
"zoneData":[ 
    {"zoneID":"Zone1","name":"Car Park South", "value":1230}, 
    {"zoneID":"Zone2","name":"Outdoor North", "value":3453}, 
    {"zoneID":"Zone3","name":"Outdoor West", "value":2342}, 
    {"zoneID":"Zone4","name":"Outdoor South", "value":3453}, 
    {"zoneID":"Zone5","name":"High St. East", "value":1023}, 
    {"zoneID":"Zone6","name":"High St. West", "value":2322}, 
    {"zoneID":"Zone7","name":"Car Park North", "value":4562}, 
    {"zoneID":"Zone8","name":"Indoor North", "value":5644}, 
    {"zoneID":"Zone9","name":"Indoor South", "value":2356} 
] 
} 

:

나는 그런 다음

<polygon id="Zone2" fill="#DFECC5" stroke="#000000" stroke-miterlimit="10" points="828.815,660.425 841.261,594.05 842.82,594.422 849.014,564.644 837.769,562.306 841.108,546.883 851.945,549.118 866.75,474.55 837.799,468.253 837.254,470.748 833.572,470.097 833.982,467.844 817.591,463.942 818.746,458.473 875.479,470.067 838.604,655.601 837.24,662.395 " style="fill: rgb(244, 246, 252);"><title>Car Park South, 1230</title></polygon> 

등 여러 가지 다각형이있는 SVG, 나는 JSON 파일을 구문 분석하고있어 것을 만들었습니다 적절한 색 눈금을 사용하고 각 눈금마다 색상을 설정하기 위해 해당 눈금을 사용하지만 잘못된 순서로 표시됩니다. 이 스크립트는 여기에 있습니다 : 나는 selections과 thinking with joins에 문서 보았다하지만 JSON 데이터 배열 요소 내 선택의 기존 요소와 일치하는 방법을 알아낼 수 없습니다했습니다

d3.json("zoneAnalysisData.json", function(error, data) { 

     var minDataValue = d3.min(data.zoneData, function(d) { return d.value; }) 
     var maxDataValue = d3.max(data.zoneData, function(d) { return d.value; }) 

     var color = d3.scale.linear() 
      .domain([minDataValue, maxDataValue]) 
      .range(["#ffffff", "#0038c5"]); 

     d3.selectAll("[id*='Zone']") 
      .data(data.zoneData) 
      .style("fill", function(d){ 
        return color(d.value); 
       }) 
      .append("title") 
       .text(function(d) { 
         return d.name + "\n" + d.value; 
       }); 
     }); 

.

Answer 1

.selectAll()으로 보장되지 않는 특정 순서로 다각형을 선택해야하는 문제가 있습니다. 또한 D3의 .sort() 메서드는 해당 요소에 바인딩되지 않은 데이터에서 작동하기 때문에 쉽게 재정렬 할 수 없습니다.

이 문제를 해결하는 한 가지 방법은 데이터를 수동으로 요소와 데이터를 일치시킬 수있는 요소에 "첨부"하는 것입니다.

d3.selectAll("[id*='Zone']") 
     .each(function() { this.__data__ = { zoneID: this.id }) 
     .data(data.zoneData, function(d) { return d.zoneID; }) 
     ... 

여기에 두 번째 줄은 D3가 내부적으로 수행하고 D3는 데이터 바인딩을 발견 할 때를 검색하는 속성을 생성하는 것 모방 : 그럼 당신이 필요로하는 모든 핵심 기능입니다.