D3は、私が米国のchoroplethマップを作成し、いくつかのデータによると、それに色をしようとしているマップ

Question

の部分をレンダリングします。だから、私は（ちょうどJSONファイル）のデータを取得：

d3.queue() 
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json') 
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json') 
.await(ready); 

その後、私のレディ機能で、私はこの

function ready(error, us, education) { 
    if (error) throw error; 

    svg.append("g").selectAll("path") 
    .data(topojson.feature(us, us.objects.counties).features) 
    .enter() 
    .append("path") 
    .attr("class", "county") 
    .attr("fill", "red") 
    .attr("d", path) 

（マイpath変数は、ファイルconst path = d3.geoPath();の上に定義されている）

を行います私は地図を取得しますが、いくつかの郡がレンダリングしないように、いくつかの種類の穴があります。私はそれがすべてちょうど赤でなければなりませんので、まだカラーリングを実現しますが、（もmouseoverに反応しない）大きな黒い破片を持っていません。あなたは私のCodePen上でそれを見ることができます：http://codepen.io/enk/pen/dNBOoj

してください、私のミスがどこにあるか教えてください。

Answer 1

あなたの問題は、あなたのメッシュである：

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

あなたはCSSでそれをなしの塗りつぶしを指定する必要があります。

.states { 
    fill:none; 
} 

またはそれを追加し、コード内：

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

Updated pen。