D3：我用的是什么投影？ / 如何用空投影进行简化？答案

【问题标题】：D3: What projection am I using? / How to simplify with a null projection?D3：我用的是什么投影？ / 如何用空投影进行简化？
【发布时间】：2013-09-27 14:24:26
【问题描述】：

我正在尝试简化缩放时的 d3 地图，并且我使用 this example 作为起点。但是，当我用自己的 (http://weather-bell.com/res/nws_regions.topojson) 替换示例中的 json 文件时，我得到了一个小小的倒置的小地图。

这是我的 jsfiddle：http://jsfiddle.net/8ejmH 代码：

var width = 900,
    height = 500;

var chesapeake = [-75.959, 38.250];

var scale,
translate,
visibleArea, // minimum area threshold for points inside viewport
invisibleArea; // minimum area threshold for points outside viewport

var simplify = d3.geo.transform({
    point: function (x, y, z) {
        if (z < visibleArea) return;
        x = x * scale + translate[0];
        y = y * scale + translate[1];
        if (x >= 0 && x <= width && y >= 0 && y <= height || z >= invisibleArea) this.stream.point(x, y);
    }
});

var zoom = d3.behavior.zoom()
    .size([width, height])
    .on("zoom", zoomed);

// This projection is baked into the TopoJSON file,
// but is used here to compute the desired zoom translate.
var projection = d3.geo.mercator().translate([0, 0])



var canvas = d3.select("#map").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
    .projection(simplify)
    .context(context);

d3.json("http://weather-bell.com/res/nws_regions.topojson", function (error, json) {
    canvas.datum(topojson.mesh(topojson.presimplify(json)))
        .call(zoomTo(chesapeake, 0.05).event)
        .transition()
        .duration(5000)
        .each(jump);
});

function zoomTo(location, scale) {
    var point = projection(location);
    return zoom.translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
        .scale(scale);
}

function zoomed(d) {
    translate = zoom.translate();
    scale = zoom.scale();
    visibleArea = 1 / scale / scale;
    invisibleArea = 200 * visibleArea;
    context.clearRect(0, 0, width, height);
    context.beginPath();
    path(d);
    context.stroke();
}

function jump() {
    var t = d3.select(this);
    (function repeat() {
        t = t.transition()
            .call(zoomTo(chesapeake, 100).event)
            .transition()
            .call(zoomTo(chesapeake, 0.05).event)
            .each("end", repeat);
    })();
}

我的猜测是我正在使用的 topojson 文件已经内置了投影，所以我应该在 d3 中使用空投影。如果我根本不使用投影，地图会正确呈现：(http://jsfiddle.net/KQfrK/1/) - 但是我无法简化缩放。

我觉得我缺少一些基本的东西......也许我只需要在我的第一个小提琴中以某种方式旋转和放大地图。

无论哪种方式，我都希望能得到一些帮助。一直在努力解决这个问题。

编辑：我使用 QGIS 来保存带有“EPSG:3857 - WGS 84 / Pseudo Mercator”投影的 geojson 文件。但是，当我使用 topojson 命令行实用程序将其转换为 topojson，然后使用与上面相同的代码使用 D3 显示它时，我得到一个空白屏幕。

我应该在 topojson 命令行实用程序中指定投影吗？我尝试这样做，但收到一条错误消息：

topojson --projection EPSG:3857 E:\gitstore\public\res\nws.geojson -o E:\gitstore\public\res\nws.topojson --id-property NAME


[SyntaxError: Unexpected token :]

【问题讨论】：

标签： d3.js map-projections simplification

【解决方案1】：

TopoJSON 文件没有内置投影，当您没有指定投影时，您只是使用默认投影（即 albersUsa，请参阅the documentation）。您可以通过不带参数调用 d3.geo.projection() 来检索此投影。然后你可以用通常的方式修改这个投影以进行缩放等。

【讨论】：

如果我将 d3.geo.mercator() 替换为 d3.geo.projection() 我会收到一条错误消息：“未捕获的类型错误：无法读取未定义的属性‘反转’。”如果我用 d3.geo.albersUsa() 替换它，那么我会得到另一张朝不同方向飞行的颠倒小地图。
您需要调整您的硬编码坐标等以使其对该投影也有效。
请查看我的更新 - 我正在尝试将地图转换为墨卡托投影并将其硬编码到 topojson 文件中。
好吧，那是另一回事。不过，您需要将D3 projections 之一提供给 topojson。
@Mike，我已经敲响了你的第二把小提琴to here，包括改变的投影和路径线，这可能会澄清一些事情。在我看来，您的 json 似乎在墨卡托中。

【解决方案2】：

我使用墨卡托投影设置了这个fiddle，并在this block 的基础上采用了不同的方法来放大和缩小，对我来说这是一种更简单的方法。我感觉翻译位中的 zoomTo 函数存在问题，但我可以确切地知道它是什么。所以我用下面的代码替换并包含了一个递归调用：

function clicked(k) {

    if (typeof k === 'undefined') k = 8;

    g.transition()
        .duration(5000)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -projection(chesapeake)[0] + "," + -projection(chesapeake)[1] + ")")
        .each("end", function () {
        (k === 8) ? k = 1 : k = 8;
        clicked(k);
    });

【讨论】：