Question

我试图用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;
}

Answer 1

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

享受！

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

1 个答案: