d3地図の視覚化に欠けているアイテム

Question

私はボストックの有名な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 

者は、問題を正確状態です。

ソリューション：これらのIDにゼロを追加します。これはあなたのCSVたかのように

.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); 

は今、あなたは、正しいIDを持っている：https://jsfiddle.net/r95e113L/：ここ

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

が更新フィドルです

もちろん、これをコードなしで修正できます。テキストエディタでCSVを開き、それらにゼロを追加するだけですIDを手動で入力します。

別のさらに短い修正：文字列から整数へのIDを変換：

.attr("fill", function(d) { 
    return color(d.value = num.get(+d.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", function(d) { console.log(num.get(d.id)); return color(d.value = num.get(d.id)); }) 

私は7ことを見ることができます

.attr("fill","steelblue") 

私はすべてを見ることができますフィーチャが必要な場所に定義されていない場合、これはあなたのドローを投げ捨てるものになる可能性があります。私はそれを交換する場合：ゼロで未定義の値を置き換え

.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