Почему моя карта d3 выглядит странно?

Я пытаюсь спроецировать карту d3 США. Почему-то это выглядит так:

введите здесь описание изображения

Я использовал mapshaper.org, чтобы создать топожсон. Я взглянул на эту ссылку:

устранение неполадок карты d3 toposjon … почему это выглядит как сплошь зигзаги и осколки?

но это не очень помогло. Вот мой код:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geo.albersUsa()
                .scale(1000)
                .translate([width / 2, height / 2]);

            var path = d3.geo.path()
                .projection(projection);

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            d3.json("states.json", function(error, us) {

              svg.insert("path", ".graticule")
                  .datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && !(a.id / 1000 ^ b.id / 1000); }))
                  .attr("class", "county-boundary")
                  .attr("d", path);

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

            d3.select(self.frameElement).style("height", height + "px");                
    </script>
</body>

Could you help me out?

Спасибо!


javascript d3.js geojson topojson
person user3700215    schedule 02.05.2015    source источник
comment
Установите fill: none; stroke: black для path элементов в вашем CSS.   -  person Lars Kotthoff    schedule 02.05.2015
comment
@LarsKotthoff, это несколько исправило ситуацию. Однако я больше не получаю схему страны: i.imgur.com/SHlq4t8.png Ты хоть представляешь, что? Спасибо за помощь!   -  person user3700215    schedule 02.05.2015
comment
Они могут быть в данных как отдельный объект -- us.objects.country?   -  person Lars Kotthoff    schedule 02.05.2015
comment
Может быть, как сказал Ларс, или у вас есть что-то особенное в CSS на границах, что тоже возможно. Вы взяли существующий пример, чем, пожалуйста, покажите свой код.   -  person kwoxer    schedule 02.05.2015
comment
Спасибо всем! Я добавил следующий код: svg.insert("path", ".graticule") .datum(topojson.feature(us, us.objects.land)) .attr("class", "land") .attr("d", path);, и он добавил границу страны.   -  person user3700215    schedule 03.05.2015