使用topojson和D3映射数据

所以这里是我第一次使用D3的库来创建美国县的地图。使用topojson和D3映射数据

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://unpkg.com/[email protected]"></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格式不正确。对象的属性属性的名称是我拍摄的功能的必要条件。任何帮助将不胜感激。先谢谢你。

来源

2017-04-18 Neal Taylor

这两个数据源的格式都是正确的，但它们在一个方面有所不同，一个是预测而另一个不是。

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

第二个代码块中的数据集未投影（或用WGS84或其他数据“投影”）。它由表示南北/东/西/度的点组成。这topojson转换为普通GeoJSON的，我们看到这样的坐标：...[-167.36922883183183,53.30289293393393]...

与已预测数据，并没有地理坐标（API documentation，example），你只需服用坐标的数据集，将它们转换为SVG协调，没有变换空间。

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

来源

2017-04-18 20:25:29

使用topojson和D3映射数据

回答

相关问题