D3 с Topojson только отображает части карты

Question

Я пытаюсь создать choropleth карту США и покрасить ее по некоторым данным. Таким образом, я получаю данные (только 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.