D3绘制空投影的经度/纬度

Question

d3.geo.path 的投影为空，因为 TopoJSON 已经投影，因此可以按原样显示。我正在尝试在地图上以 [longitude, latitude] 的形式绘制数据。

下面是我的代码基本上是这样的：

var width, height, path, svg;

width = 960;
height = 600;
path = d3.geo.path().projection(null);
svg = d3.select('.viz').append('svg')
    .attr('width', width)
    .attr('height', height);

d3.json("counties.json", function(error, us) {
    svg.append('path')
        .datum(topojson.mesh(us))
        .attr('d', path);
});

svg.selectAll('.pin')
    .data(ds) // i.e. ds = {[12.521, 15.312], [616.122,-31.160]}
    .enter().append('circle', '.pin')
    .attr('r', 3)
    .attr('transform', function (d) {
        return 'translate(' + path([
            d.longitude,
            d.latitude
        ]) + ')';
    });

我通过这个进行了调试，我确实得到了很好的数据。但是，我收到“路径（[d.longitude，d.latitude]）”未定义的错误。 “d”与经度和纬度值一起存在。 “路径”也存在。我认为这是因为投影为空。

我可以做些什么来完成这项工作？

------- 编辑 ------- 我按照 Ben Lyall 的建议删除了 selectAll 语句中“路径”的使用，并将 selectAll 语句移到了 .json() 中。我还注意到我为 ds 输入了一个错误的示例，所以我修改了评论。这是我更新的代码。

这可以很好地显示地图，没有控制台错误，但我仍然没有在地图本身中看到任何圆圈。

var width, height, path, svg;

width = 960;
height = 600;
path = d3.geo.path().projection(null);
svg = d3.select('.viz').append('svg')
    .attr('width', width)
    .attr('height', height);

d3.json("counties.json", function(error, us) {
    svg.append('path')
        .datum(topojson.mesh(us))
        .attr('d', path);

    svg.selectAll('.pin')
        .data(ds) // i.e. ds = [{longitude: 12.521, latitude: 15.312}, {longitude: 616.122, latitude: -31.160}]
        .enter().append('circle', '.pin')
        .attr('r', 3)
        .attr('transform', function (d) {
            return 'translate(' +
                d.longitude + ',' + d.latitude +
            ')';
        });
});

------- 编辑 ------- 该解决方案结合了 Ben Lyall 提出的解决方案，并考虑了在地图上已经为 .pins 完成的投影。由于代码中的投影为空，我必须创建一个与地图投影匹配的新投影，然后在对.pin 执行转换时使用它。

解决方法如下：

var width, height, path, projection, svg;

width = 960;
height = 600;
path = d3.geo.path().projection(null);
projection = d3.geo.albersUsa().scale(1280).translate([width/2, height/2]);
svg = d3.select('.viz').append('svg')
    .attr('width', width)
    .attr('height', height);

d3.json("counties.json", function(error, us) {
    svg.append('path')
        .datum(topojson.mesh(us))
        .attr('d', path);

    svg.selectAll('.pin')
        .data(ds)
        .enter().append('circle', '.pin')
        .attr('r', 3)
        .attr('transform', function (d) {
            return 'translate(' +
                projection([d.longitude, d.latitude]) +
            ')';
        });
});

Answer 1

当您定位.pin 元素时，为什么在translate 中使用path？您不想创建路径，d.latitude 和 d.longitude 值应该已经在像素坐标中，因为它们已经被投影，所以您应该能够直接使用它们。

注意：您可能还希望在 d3.json 处理程序中而不是在外部处理您的那部分代码，因为它会在您的数据设置为任何内容之前异步运行（这可能是您的代码的实际问题，而不是而不是错误地使用path）。

如果没有 fork 的例子，这有点难以确认，但试试这个：

var width, height, path, svg;

width = 960;
height = 600;
path = d3.geo.path().projection(null);
svg = d3.select('.viz').append('svg')
    .attr('width', width)
    .attr('height', height);

d3.json("counties.json", function(error, us) {
    svg.append('path')
        .datum(topojson.mesh(us))
        .attr('d', path);

    svg.selectAll('.pin')
        .data(ds) // i.e. ds = {[12.521, 15.312], [616.122, -31.160]}
        .enter().append('circle', '.pin')
        .attr('r', 3)
        .attr('transform', function (d) { 
            return 'translate(' + d.longitude + "," + d.latitude + ')';
        });
});