d3 投影转换中的数据位置

Question

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

我做了一个JsFiddle demo based on https://bl.ocks.org/mbostock/3711652.

显然数据点不遵循投影转换。这是我添加的相关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 演示，它正在做的是更新它 select 路径对象并转换它。

这是一个工作示例： 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的原点设在圆心的long/lat，"angle"就是我们的半径

然后我们使用 d3.geo.path() 将属性 "d" 设置为路径，然后我们 "project" 通过 select 当前 select 在 select 中编辑选项并检索关联的投影。

d3 投影转换中的数据位置

Data positions in d3 projection transitions

javascript

projection

d3.js