为什么渲染这个 SVG 地图会使我的浏览器崩溃？答案

【问题标题】：Why is rendering this SVG map crashing my browser?为什么渲染这个 SVG 地图会使我的浏览器崩溃？
【发布时间】：2013-05-24 23:54:52
【问题描述】：

我正在尝试使用 this shapefile 使用 D3（和 topojson）制作干旱地图。

我已将其转换为 GeoJSON 和 topojson，但无论哪种情况，尝试渲染都会导致浏览器挂起，并且该选项卡的 CPU 达到 100% 或更高。

我可以渲染更大的文件，就像所有 US counties 一样，我可以使用 Mapnik 或 TileMill 渲染文件。但在浏览器中，它就死了。

Here's the relevant code.

var map = d3.select('#map').append('svg')
    .style('width', width)
    .style('height', height);

var albers = d3.geo.albersUsa();

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

d3.json(urls.drought, function(err, data) {

    var drought = window.drought = topojson.feature(data, data.objects.usdm130521);

    map.selectAll('path')
        .data(drought.features)
      .enter().append('path')
        .attr('d', path);
});

【问题讨论】：

标签： d3.js gis topojson

【解决方案1】：

想通了。正如USDM site says，“文件已投影到美国连续阿尔伯斯等面积圆锥投影。”

事实证明，这是一个问题，虽然我并不完全理解。我使用ogr2ogr 将其转换为EPSG: 4326：

$ ogr2ogr -t_srs EPSG:4326 usdm130521-projected.shp usdm130521.shp

然后它被渲染了。也快。

Mike Bostock 写了更多关于投影 topojson here。

【讨论】：