d3.js - 投影topojson的方法？

Question

给定一个 shapefile:

Natural_earth/ne_10m_admin_0_sovereignty.zip

鉴于我们想为 D3js 数据可视化重新投影它，我们可以在不同的层次上重新投影。

1. 使用 ogr2ogr 获取重新投影的 shapefile (1) :

ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp

或 2. 使用 (npm) topojson.js 获得重新投影的 topojson ( 2 ) :

topojson \
        -o output.topo.json
        --projection 'd3.geo.albersUsa()' \
        -q 1e5 \
        -s 1 \
        -- input.shp

或 3. 获得重新投影的 D3js 数据/SVG (1)，D3js 代码包括:

var path = d3.geo.path()
    .projection(d3.geo.albersUsa())   // unsure of this syntaxe, confirmation welcome, just delete this comment.

概述:

Mike Bostock > Projected Topojson告诉我们第一种和第二种方式“消除了在渲染时投影几何图形的需要，提高了性能 [...] 因为每个点的重要性是在屏幕上的区域而不是地球表面上测量的。”总之，最终像素质量/文件权重比更好。

另一方面，在渲染时重新投影几何体可以在最后一刻进行更灵活的投影。

了解更多？

这就是我所知道的。如果有人可以对这些方式进行更多解释，分享有关参数的帮助资源(ogr 的 EPSG 列表，d3js 投影列表)，以及每种方式的各自优势/劣势，这可能是一本非常有趣的并行手册。

注:我会给出我的答案，但我只是开始挖掘它。我想周围有更多有经验的人。

Answer 1

只是一点背景来补充这个问题。 GeoJSON 文件包含地球上各个地方的几何描述，通常为多边形或多边形集合，其中每个顶点是一对 (longitude, latitude) .要在屏幕中创建 map ，我们需要计算 (longitude, latitude) 之间的对应关系。屏幕上的对和点(column n⁰x, line n⁰y) .这个对应是一个投影。 D3 包括 several projections .

在 (1) ，地球上的投影是使用 ogr2ogr 计算的，但您仍然需要使用 topojson 设置宽度和高度来调整视口(viewport)(参见 http://bl.ocks.org/mbostock/5557726 )作为示例。

在 (2) , 你想用 topojson直接使用原始 shapefile 生成已计算投影的 TopoJSON 文件。为此，您需要设置要使用的投影，以及一些参数(宽度和高度):

topojson --width 960 --height 800 \
         --projection 'd3.geo.orthographic' \
         -o output.json -- input.shp

如果这样做，TopoJSON 文件 ( output.json ) 将已经计算出投影，因此在设置地理路径生成器时不需要再次计算它:

var path = d3.geo.path()
    .projection(null);

在选项 (3) ，您在通过 D3.js 渲染时计算投影。为此，您需要 GeoJSON 或 TopoJSON 文件，并配置投影。

// Assuming GeoJSON
d3.json('output.json', function(error, geodata) {

    // Create the SVG, etc...

    // Create the projection, configure the scale, translation and rotation
    var projection = d3.geo.mercator()
        .translate([width / 2, height / 2]);

    // Create the path generator
    var path = d3.geo.path()
        .projection(projection);

    // Generate the shapes
    svg.selectAll('path.feature').data(geodata.features)
        .enter().append('path')
        .attr('class', 'feature')
        .attr('d', path);
});

问候，