D3：使用topojson制作的地图无法正确渲染

Question

D3：使用topojson制作的地图无法正确渲染

4

我正在尝试从topojson文件中使用d3绘制svg地图，但是我得到的只是混乱的线条。

我使用了我在http://www.tnoda.com/blog/2013-12-07上找到的大部分代码。当我使用该网站上的topojson文件时，一切正常。我认为问题可能出在我的topojson文件中，但是当我将其导入mapshaper中时，我得到了正常的地图。 plnkr: http://plnkr.co/edit/TYiT5AoI29nEHC3Fre6D?p=preview 这是我的代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">    
    <script src="//code.jquery.com/jquery-2.0.0.js"></script>    
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js

var m_width = $("#map").width(), 
    width = 800, 
    height = 500

var projection = d3.geo.mercator()
    .scale(105)
    .translate([width / 2, height / 1.5]);

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

var svg = d3.select("#map").append("svg")
    .attr("width", m_width)
    .attr("height", m_width * height / width);

var g = svg.append("g");

d3.json("zupanije.max.topo.json", function(error, us) {
    g.append("g")
        .attr("id", "states")   
        .selectAll("path")
        .data(topojson.feature(us, us.objects.states).features) 
        .enter()
        .append("path")
        .attr("id", function(d) { return d.id; })       
        .attr("d", path)
});

styles.css

#map {
    background-color: #fff;
    border: 1px solid #ccc;
}
.background {
    fill: none;
    pointer-events: all;
}
#states{
    cursor: pointer;
    fill: #cde;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-linecap: round;
}
#states .active {
    fill: #89a;
}
pre.prettyprint {
    border: 1px solid #ccc;
    margin-bottom: 0;
    padding: 9.5px;
}

- akrelj

这很有艺术感。尝试使用教程中的原始世界数据（在此处）运行您的代码，以便您可以检查它是在代码部分还是数据部分出现了问题。同时将比例尺设置为150（默认值）。 - Hugolpz

我已经尝试使用原始数据，它可以正常工作。这就是为什么我猜测我的topojson文件出了问题，所以我在http://www.mapshaper.org/中导入了它，并得到了克罗地亚的正常地图（这就是我想用d3得到的）。因此，数据似乎没问题。顺便说一句 - 我也尝试过调整比例尺，将其设置为150、50、1000等，但没有帮助。还有中心点。但我得到的只是另一个艺术形象 :) - akrelj

2

按照这个有关加纳的问答，应用到克罗地亚，速度应该会更快。https://dev59.com/l4fca4cB1Zd3GeqPpe7D - Hugolpz

1

这次我直接使用命令将shapefile转换为topojson，跳过了geojson格式；检查了它（http://jsoneditoronline.org/），然后尝试预览它（http://hugolpz.github.io/distillery/）。经过几次浏览器崩溃，我终于能够预览它，并且它看起来很像我不断收到的那些图像。所以我猜这一定是数据相关的问题，这让我很不开心，因为我无法从任何在线上获取这些数据。非常感谢您的帮助，至少现在我知道问题出在哪里了。 - akrelj

我找出了 topojson 中的问题所在，或许可以帮助到其他人... 缩放和平移属性（在 transform 属性内部）偏差过大，导致我的地图出现了错误的图像。 - akrelj

是的，你可以通过记录你的解决方案来帮助他人。你可以回答自己的问题，验证它，然后我们会为其投票。 - Hugolpz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apathetique · Accepted Answer

我遇到了完全相同的问题，并花费数小时在命令行中使用不同的设置重新将我的SHP文件转换为GeoJSON / Topojson。解决方案非常简单！ - 在这里获取QGIS：https://www.qgis.org/en/site/forusers/download.html - 打开您的SHP文件或GeoJSON文件 - 选择要导出的图层 - 转到“图层”>“另存为” - 格式：Geojson - CSR：WGS 84，EPSG：4326 - 保存。

享受吧！