Javascript D3绘制零投影的经纬度

d3.geo.path具有空投影，因为TopoJSON已经被投影，所以可以按原样显示。我试图在地图上以[经度，纬度]的形式绘制数据

下面是我的代码的基本外观：

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语句中删除“path”的用法，并将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提出的解决方案，并考虑了已在地图上对

.pin

s进行的投影。由于代码中的投影为空，因此我必须创建一个与地图投影匹配的新投影，然后在

.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]) +
            ')';
        });
});

---

在定位

.pin

元素时，为什么要在

翻译中使用
路径
？您不想创建路径，
d.latitude
和
d.longitude
值应该已经在像素坐标中，因为它们已经被投影了，所以您应该能够直接使用它们

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

如果没有一个例子来证明这一点有点困难，但请尝试以下方法：

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 + ')';
        });
});

谢谢你，本！我更新了我的代码。这次我没有得到控制台错误，但我仍然没有在地图上看到任何PIN。我更新了我原来的帖子。在这种情况下，你必须向我们展示一个例子，而不看你的
ds
值是什么，这将很难诊断。我发现问题不是数据，而是.pin的投影。.pin需要使用已经为地图完成的相同投影。我已经发布了解决方案。谢谢。这正是我说您需要在问题中包含更多信息的原因，特别是
ds
数组中的值。不知道如果没有这些价值观，你会期望任何人回答这个问题。谢谢Ben的反馈。然而，我对你的评论感到困惑。我相信我提供了足够多的信息，但下次我会更加小心。我提供了示例值。事实上，您不需要知道ds中的实际值，就可以知道我的代码出了什么问题，因为我使用的是空投影，因为topojson已经被投影了。问题是.pin不知道使用什么投影，而不知道数据。这可以在我的代码中看到，我在没有调试数据的情况下就发现了这一点。感谢本为你提供的帮助。