Question

所以这是我第一次使用D3的库来创建美国郡的地图。

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

<svg width="960" height="600"></svg>

<script>

  'use strict';

   let path = d3.geoPath();

   let svg = d3.select("svg");

    d3.queue()
      .defer(d3.json, "https://d3js.org/us-10m.v1.json")
      .await(ready)


    function ready(error, us) {

      if (error) throw error;

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

    }

简单直接。有用。但是，当我使用每个县对象的道具中的名称将src更改为更好的json时：

d3.queue()
 .defer(d3.json, "https://gist.githubusercontent.com/NealTaylor715/a08cc300e661aa45c464fa1e553b6f33/raw/eaa03db6827f2d6435b3898cae6fba03d6f55956/USCounties.json")
 .await(ready);

地图中断了。我得到一个空白的SVG这个小灰色斑点。奇怪的是，数据正在追加到路径上，而不是我想的那样。有什么指针吗？我的新JSON是否格式不正确。对象上的名字＆＃39; 属性属性是我拍摄功能的必需品。任何帮助将不胜感激。提前谢谢。

Answer 1

两个数据源的格式都是正确的，但它们在一个方面是不同的，一个是投影而一个不是。

您的第一个代码块中的数据集已经被投影，也就是说它已经从三维椭球上的点转换为笛卡尔平面上的点。我们可以告诉他们不是纬度经度对作为坐标，当转换为常规geojson时，显示点...[649.7055250753067,200.18804561250514]...

第二个代码块中的数据集是未投影的（或者使用WGS84或其他一些数据进行投影）。它由表示北/南度和东/西度的点组成。将此topojson转换为常规geojson，我们会看到如下...[-167.36922883183183,53.30289293393393]...

的坐标

对于已投影的数据，并且没有geoTransform（API documentation，example），您只需获取数据集中的坐标并将其转换为SVG坐标空间而不进行转换。

对于未投影的数据，您需要使用投影（例如d3.geoAlbers）来正确缩放和转换lat长对，椭球上的点到平面上的x，y点。

使用topojson和D3映射数据

1 个答案: