d3지도 시각화에서 누락 된 항목

Question

M. Bostock의 유명한 Choropleth example을 다시 만들려고하지만 카운티 대신 주별로 색칠합니다. 대부분의 경우 작동하지만 처음 몇 주에서는 렌더링되지 않습니다. 다른 질문에 대한 연구에서 나는 selectAll issue이거나 d3이 어떻게 색인을 파싱하는지에 대한 문제가 있다고 생각합니다. 그러나 나는 그것을 이해할 수없는 것 같습니다. 다음은

내가 상태를 가서 렌더링 특정 기능입니다 :

function testMap(error, us){ 
    if(error) throw error; 
    svg.append("g") 
     .attr("class", "states") 
    .selectAll("path") 
    .data(topojson.feature(us, us.objects.states).features) 
    .enter().append("path") 
     .attr("fill", function(d) { return color(d.value = num.get(d.id)); }) 
     .attr("d", path) 
    .append("title") 
     .text(function(d) { return state.get(d.id) + ", " + d.value; }); 

    svg.append("path") 
     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) 
     .attr("class", "states") 
     .attr("d", path); 

Here's a working JSFiddle with my issue

PS : 내가 가지고있는,이 예를 들어 D3 v4를 사용하려고 시도하고 나는주의해야한다 배운 내용은 v3에서 상당히 벗어났습니다.

Answer 1

이 문제이다 : 당신의 CSV에서

, 당신은 ID 단지 1 숫자로 몇 가지 상태를 가지고있다. num.set(d.id, d.value) 2 자리 (01, 02, 04, 05 등)이 경로의 ID와 일치하지 않기 때문에

state  abrev id value 
Alabama  AL  1 0.113771056 
Alaska  AK  2 0.634948665 
Arizona  AZ  4 0.022697068 
Arkansas AR  5 0.762050795 
California CA  6 0.99979688 
Colorado CO  8 0.606026214 
Connecticut CT  9 0.165650662 
Delaware DE  10 0.950772614 
//from Delaware on, all IDs have 2 digits 

사람들은 문제를 정확히 상태입니다.

솔루션 :

.defer(d3.csv, "https://dl.dropboxusercontent.com/u/2465343/test.csv", 
     function(d) { 
      if (d.id.length == 1) { 
       d.id = "0" + d.id; 
      } 
      num.set(d.id, d.value); 
      state.set(d.id, d.state) 
     }) 
    .await(testMap); 

을이 당신의 CSV 것처럼 이제 올바른 ID가 : 그 ID에 0을 추가

여기

state  abrev id value 
Alabama  AL  01 0.113771056 
Alaska  AK  02 0.634948665 
Arizona  AZ  04 0.022697068 
Arkansas AR  05 0.762050795 
California CA  06 0.99979688 
Colorado CO  08 0.606026214 
Connecticut CT  09 0.165650662 
Delaware DE  10 0.950772614 
//... 

업데이트 된 바이올린입니다 : https://jsfiddle.net/r95e113L/

물론 코드없이이 문제를 해결할 수 있습니다. 텍스트 편집기에서 CSV를 열고 해당 텍스트에 0을 추가하기 만하면됩니다. ID를 수동으로 입력하십시오.

또 다른도 짧은 수정 : https://jsfiddle.net/entraop9/

Answer 2

좋은 소식이 있습니다. 문제는지도 기능을 추가하는 방법이 아닙니다.

.attr("fill", function(d) { return color(d.value = num.get(d.id)); }) 

에 : :이 변경하면 https://jsfiddle.net/h6b2bjrt/

내가 그 라인을 변경하는 경우 :

.attr("fill","steelblue") 

을 나는 모든 것을 볼 수 있습니다

attr("fill", function(d) { console.log(num.get(d.id)); return color(d.value = num.get(d.id)); }) 

가 나는 것을 볼 수 있습니다을 칠 지형지 물이 어디에 있어야하는지 정의되지 않았 으면, 이것이 당신의 그림을 던지려는 것일 수 있습니다. 내가로 교체하는 경우 : 제로로 정의되지 않은 값을 대체

.attr("fill", function(d) { if(num.get(d.id) == undefined) { return color(d.value = 0); } else { return color(d.value = num.get(d.id)); } }) 

, I see all the states