Javascript D3:带有topojson的贴图无法正确渲染_Javascript_Svg_D3.js_Topojson

Javascript D3:带有topojson的贴图无法正确渲染

javascript svg d3.js

Javascript D3:带有topojson的贴图无法正确渲染,javascript,svg,d3.js,topojson,Javascript,Svg,D3.js,Topojson,我试图用topojson文件中的d3绘制svg地图，但我得到的只是混乱的线条我正在使用在上找到的大部分代码。当我使用该站点的topojson文件时，一切都正常。我想问题可能出在我的topojson文件中，但当我在mapshaper中导入它时，我得到的是法线贴图 plnkr：这是我的密码： index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.

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

我正在使用在上找到的大部分代码。当我使用该站点的topojson文件时，一切都正常。我想问题可能出在我的topojson文件中，但当我在mapshaper中导入它时，我得到的是法线贴图

plnkr：

这是我的密码：

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>

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;
}

我遇到了完全相同的问题，花了数小时在命令行中用不同的设置将我的SHP文件重新转换为GeoJSON/Topojson。解决办法很简单！ -在此处获取QGIS： -打开SHP文件或GeoJSON文件 -选择要导出的图层 -转到图层>另存为 -格式：Geojson -CSR:WGS 84，EPSG:4326 -保存

享受吧

它很有艺术性。使用教程中的原始世界数据尝试您的代码，这样您就可以检查代码或数据部分是否失败。也将比例设置为150默认值。我已经用原始数据试过了，效果很好。这就是为什么我猜测我的topojson文件有问题，所以我导入了它，我得到了克罗地亚的普通地图，这就是我试图用d3得到的。看来数据还可以。顺便说一句，我也试过玩音阶，把它设置为150、50、1000等等，但都没用。还有中锋。但我得到的只是另一个艺术形象：跟随这个关于加纳的问答，申请克罗地亚，应该会更快。好的，这次我用cmd将shapefile直接转换为topojson，跳过geojson格式；检查它，然后尝试预览它。在几次浏览器崩溃后，我终于能够预览它，它看起来很像我经常看到的那些图像。所以我想这一定是数据相关的问题，我对此感到不高兴，因为我无法从网上任何地方获得这些数据。非常感谢您的帮助，至少现在我知道问题出在哪里了。我发现了topojson中的错误，也许它可以帮助某人。。。transform属性中的缩放和平移属性非常不合适，这导致我的map中出现了这些错误的图像。Jup，我在我的项目中也使用了QGIS和topojson。这是一个非常棒和简单的技术组合。确保使用正确的投影。对我来说，这并不重要，因为我创造了一个自己的世界。最后你想要什么？自己的世界还是现有的投影？我导入了shp文件，进入图层>另存为>确定，它给了我一个错误：OGR错误：无法创建GeoJSON数据源：proba.GeoJSON。而且，这是一个巨大的程序，有很多功能，像我这样的新手不知道如何使用。我需要一个程序，对于那些不创建GIS但却从创建GIS的人那里获取数据的人来说，它是简单和虚拟的，并且只想以正确的方式将其导出到topojson。在这个程序中，我甚至找不到如何导出到topojson。它只给了我geojson选项。

#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;
}