【发布时间】：2015-05-14 14:19:54
【问题描述】：
我正在尝试从 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;
}
【问题讨论】：
-
很有艺术感。使用教程 (here) 中的原始世界数据尝试您的代码，以便检查代码或数据部分是否失败。也将比例设置为 150（默认）。
-
我已经用原始数据试过了，效果很好。这就是为什么我的猜测是我的 topojson 文件有问题，所以我将它导入mapshaper.org，然后我得到了克罗地亚的法线地图（这是我试图用 d3 得到的）。所以看起来数据还可以。顺便说一句 - 我也尝试使用比例，将其设置为 150、50、1000 等，但没有帮助。还带中心。但我得到的只是另一个艺术形象:)
-
关注这个关于加纳的Q/A，申请克罗地亚，应该走得更快。 stackoverflow.com/q/28556524/1974961
-
好了，这次我用cmd直接把shapefile转成topojson，跳过geojson格式；检查它（jsoneditoronline.org），然后尝试预览它（hugolpz.github.io/distillery）。在几次浏览器崩溃后，我终于能够预览它，它看起来很像我不断得到的那些图像。所以我想这一定是与数据相关的问题，我对此并不满意，因为我无法从网上任何地方获取这些数据。非常感谢您的帮助，至少现在我确定问题出在哪里了。
-
我发现了 topojson 出了什么问题，也许它可以帮助某人……缩放和平移属性（在变换属性内部）离我们很远，这导致我的地图出现这些错误的图像。跨度>
标签： javascript svg d3.js topojson