d3.js - 在自然地球数据铁路地图中

  显示原文与译文双语对照的内容
0 0

我们在Bostock的Mike ran我们制作一张地图教程and我对结果非常满意,我决定从自然地球数据集中添加一些铁路数据。

它的大部分呈现好,但是有一些神奇的工件,它似乎无关的网格被连接在一起:

https://docs.google.com/file/d/0B6e2rOpUwmtea3d4enNjY3dSbkk/edit?usp=sharing

为了解决这个问题,我把铁路数据分成 3个文件,看看是否有问题:

for country in CAN MEX USA
do
 ogr2ogr -f GeoJSON 
 -where"sov_a3='${country}'" 
 railroads_${country}.json ne_10m_railroads_north_america.shp
done

我正在使用 topojson.mesh 来呈现它们,如下所示:

svg.append("path")
. datum(topojson.mesh(na, na.objects.railroads_USA))
. attr("d", path)
. attr("class","railroad_USA");
svg.append("path")
. datum(topojson.mesh(na, na.objects.railroads_CAN))
. attr("d", path)
. attr("class","railroad");
svg.append("path")
. datum(topojson.mesh(na, na.objects.railroads_MEX))
. attr("d", path)
. attr("class","railroad");

enter image description here

否则,我的代码实际上与演示中提供的代码是相同的。

我怎么能去掉这些直线?

时间:原作者:6个回答

0 0

解决方案是为每个铁路创建一个单独的路径。 单个文件已经足够:

ogr2ogr -f GeoJSON 
 -where"sov_a3 in ('CAN', 'MEX', 'USA')" 
 railroads.json ne_10m_railroads_north_america.shp

可以创建多个路径,而不是创建单个网格,如下所示:

svg.selectAll(".railroad")
. data(topojson.feature(na, na.objects.railroads).features)
.enter().append("path")
. attr("class", function(d) { return"railroad" + d.id; })
. attr("d", path);
原作者:
...