个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这是关于 so 的第一个 topojson 问题。我在渲染 map (纽约市自治市镇)时遇到问题并且无法弄清楚原因。下面的代码只是 this example 的副本使用不同的 topojson 文件。我已经上传了文件 here .下面也是有关我如何创建文件的详细信息。现在，我只是变得困惑。可能是 topojson 文件的原因，但我不知道出了什么问题。
ps:我无法将其标记为topojson，因为之前未使用过该标记
TopoJSON 文件
1) 从 here 下载 shapefile
(在“Borough & Community Districts”下的文件“Boroughs”(左)，ArcView Shapefile)
2) 用QGis简化shapefile
3) 转换为 TopoJSON
ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json
HTML/JS 代码
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.boundary {
fill: none;
stroke: #000;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/geo/nybb.json", function(error, topology) {
svg.append("path")
.datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
.attr("d", path)
.attr("class", "boundary");
});
</script>
最佳答案
正如用户 10579 的评论所建议的，我能够通过将 shapefile 重新投影到 NAD83 (EPSG 4269) 来解决问题。从重新投影的 shapefile 创建 topojson 文件后，d3.js 显示带有
的 mapvar projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);
我遇到的第二个问题与正确的中心、比例和平移值有关。使用上面的代码，nyc 将只是一个带有大量空白的小点。找到正确的中心、比例和平移值可能有点乏味。最后，我添加了下面的代码，它允许您拖放 map 并滚动以更改比例参数。每次更改后都会显示这些值，因此可以轻松地将 map 放在正确的位置，并且只需采用控制台输出中的最后一个参数。
svg.call(d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.on("zoom", redraw));
function redraw() {
if (d3.event) {
projection
.translate(d3.event.translate)
.scale(d3.event.scale);
}
map.datum(topojson.object(topology, topology.objects.nyct2010))
.attr("d", path)
.attr("class", "boundary");
console.log("Current scale:" + projection.scale())
console.log("Current translate:" + projection.translate())
console.log("Current rotate:" + projection.rotate())
}
关于d3.js - 使用 d3.js 绘制 topojson 文件(纽约市行政区和人口普查区)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14041388/
24
4
0
我是一名优秀的程序员,十分优秀！