用d3.js绘制topojson文件（NYC自治市镇和人口普查区） [英] Plotting topojson file with d3.js (NYC boroughs and census tracts)
问题描述
这里是第一个 topojson 这样的问题。我在绘制地图（NYC自治市镇）时遇到问题，无法找出原因。以下代码仅是此示例的一个副本，其中包含不同的topojson文件。我已上传此处的文件。下面还有关于我如何创建文件的详细信息。现在，我只是得到混乱的线条。可能原因是topojson文件，但我不知道是什么问题。
ps：我无法将此标记为 topojson TopoJSON档案
p> 1）从此处下载shapefile
（在Borough& Community Districts文件Boroughs（左），ArcView Shapefile）
与QGis
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高度）;
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的评论所建议的，通过将形状文件重新投影到NAD83（EPSG 4269）来解决问题。从重投影shapefile创建topojson文件后，d3.js显示带有
的映射 var projection = d3.geo.albers ）;
var path = d3.geo.path（）。projection（projection）;
我遇到的第二个问题与正确的center，scale和translate值有关。与上面的代码nyc将只是一个小点与大量的空白。找到正确的中心，缩放和翻译值可能有点繁琐。最后，我添加了下面的代码，它允许您拖放地图，滚动更改scale参数。每次更改后都会显示这些值，因此可以很容易地将地图放置在正确的位置，并只需使用控制台输出的最后一个参数。
svg.call（d3.behavior.zoom（）
.translate（projection.translate $ b .scale（projection.scale（））
.on（zoom，redraw））;
function redraw（）{
if（d3.event）{
projection
.translate（d3.event.translate）
.scale .event.scale）;
}
map.datum（topojson.object（topology，topology.objects.nyct2010））
.attr（d，path）
.attr 边界）;
console.log（Current scale：+ projection.scale（））
console.log（Current translate：+ projection.translate（））
console.log rotate：+ projection.rotate（））
}
here is the first topojson question on so. I am having problems rendering a map (NYC boroughs) and can't figure out why. The code below is just a copy of this example with a different topojson file. I have uploaded the file here. Below are also the details about how I created the file. Right now, I am just getting chaotic lines. Probably, the reason is the topojson file but I don't know what's wrong.
ps: I was unable to tag this as topojson because the tag has not been used before
TopoJSON file
1) Download shapefile from here
(Under "Borough & Community Districts" the file "Boroughs" (left), ArcView Shapefile)
2) Simplify shapefile with QGis
3) Convert to TopoJSON with
ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json
HTML/JS Code
<!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>
As also suggested by user 10579's comment, I was able to solve the problem by re-projecting the shapefile to NAD83 (EPSG 4269). After creating the topojson file from the reprojected shapefile, d3.js shows the map with
var projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);
The second problem I encountered was related to the correct center, scale, and translate values. With the code above nyc will just be a small dot with a lot of white space. Finding the correct center, scale, and translate values can be a little tedious. In the end, I added the code below, which allows you to drag and drop the map around and scroll to change the scale parameter. The values are displayed after each change so that it's easy to put the map in the right location and just adopt the last parameters from the console output.
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绘制topojson文件（NYC自治市镇和人口普查区）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
