d3 投影转换中的数据位置

Question

如何将数据位置包含在 d3 投影转换中？

我根据https://bl.ocks.org/mbostock/3711652做了一个JsFiddle demo。

显然数据点不遵循投影转换。这是我添加的相关 javascript：

//==========================================
var button = d3.select("#button")
    .on("click", function(){
       drawDot();
     });

function drawDot(){
    var coordinates = projection([d3.select("#lon").property("value"),
                                  d3.select("#lat").property("value")]);
    d3.select('svg')
        .append('svg:circle')
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', 5);
}
//==========================================

Answer 1

所以首先你的 JS Fiddle 不起作用。

查看 bl.ocks 演示它所做的是在更新时选择路径对象并对其进行转换。

这是一个工作示例： https://jsfiddle.net/87h9ysLv/6/

function drawDot(){
var coordinates = projection([d3.select("#lon").property("value"),
                              d3.select("#lat").property("value")]);
d3.select('svg')
    .append('path')
    .datum(d3.geo.circle().origin(coordinates).angle(2))
    .attr('d', d3.geo.path().projection(options[d3.select("#projection-menu")[0][0].selectedIndex].projection));}

所以圆需要是一个设置了“d”属性的路径元素。为此，我们需要将基准设置为我们想要的圆形对象，在这种情况下，它使用“geo”类型来工作（地理的缩写）。

所以我们将 geo.circle 的原点设置为中心的经度/纬度，“角度”是我们的半径。

然后我们使用 d3.geo.path() 将属性“d”设置为路径，然后我们通过在选择中选择当前选定的选项并检索相关投影来将其“投影”到形状上。