题

我想转换一个要素，墨西哥的城市变成一个topojson和显示它使用d3.js 使用这一教程 http://bost.ocks.org/mike/map/#converting-data.我已经成功转换它但是我不可能管理来显示这一点。任何帮助，将不胜感激。

这是我的工作到目前为止：

1)下载和解的要素

wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip 
unzip mgm2010v5_0a.zip

2)转换为式，reprojecting纬度长和子集的要素

ogr2ogr  -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp

3)转换为topojson

topojson --id-property OID -p name=OID -p name -o df2.json df.json

4)和创造html码

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 1160;

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

 d3.json("df2.json", function(error, df2) {
 svg.append("path")
  .datum(topojson.feature(df2, df2.objects.df))
  .attr("d", d3.geo.path().projection(d3.geo.mercator()));
 });

 </script>

如果我运行html我只是一个空白页。任何想法什么我可能做错了什么？

有帮助吗？

解决方案

最简单的选择，如果你不是特别突出，就是用投影提供的要素(Lambert形锥体).使用 topojson's--宽度和--高度命令行标志来重新调整预计的要素，以一个合理的规模。例如，如果你想要的东西960px广泛的，你可以说:

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp

(这也简化了在屏幕上坐标，方便。)

一个全面的例子有一个生成文件是在 bl.ocks.org/9265467:

mexico

如果，另一方面，你希望指定自己的投影，那么它的合理使用ogr2ogr撤消投影，然后再定义的一个投射在浏览器。但在这种情况下，只要指定投射参数适当地进行。例如，重建相同的投影在浏览器，你可以说:

var projection = d3.geo.conicConformal()
    .rotate([102, 0])
    .center([0, 24])
    .parallels([17.5, 29.5])
    .scale(1850)
    .translate([width / 2, height / 2]);

(调中心和比例为你喜欢到适合你的期望视区。) 这种替代办法是，表明在 bl.ocks.org/9265674:

mexico 2

我通常喜欢使用投射的坐标(第一种方法，上文)，因为它们更快地呈现和简化，效率更高。另一方面，如果你想改变的突的动态显然不可能有这样一个复杂的要素—然后突出在浏览器的路要走。以及突出在浏览器是不错的开发期间，因为很容易改变的参数和重新装载。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top