D3地图显示为不规则形状

时间:2017-10-04 19:00:10

标签: javascript json dictionary d3.js projection

我正在尝试使用d3将.json文件读入HTML文件。

当我使用一个.json文件 - 对于整个美国 - 地图显示正常。但是,当我尝试将US文件切换为威斯康星州.json文件状态时,它会显示如下...

enter image description here

任何人都知道问题是什么?

以下是代码:

    <script>
        var margin = {top: 20, left: 20, bottom: 20, right: 20}
          height = 600-margin.top - margin.bottom,
          width = 960 - margin.left - margin.right;

        var svg2 = d3.select("#map2").append("svg")
           .attr("height", height)
           .attr("width", width)
           .append("g")
              .attr("transform", "translate(" + margin.left + "," + 
               margin.right + ")");

        d3.queue()
            .defer(d3.json, "wiscCountiesGeneralized.json")
            .await(ready);

        var projection2 = d3.geoAlbers()
            .translate([width/2, height/1.5])
            .scale(75)

        var path2 = d3.geoPath()
           .projection(projection2)

        function ready (error, data) {
           console.log(data)
           var counties = topojson.feature(data, 
           data.objects.counties).features
           console.log(counties)

         svg2.selectAll(".counties")
            .data(counties)
            .enter().append("path")
            .attr("class", "counties")
            .attr("d", path2)

  }
</script>

0 个答案:

没有答案