Question

如何将数据位置包含在d3投影过渡中？

我根据JsFiddle demo制作了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小提琴不起作用。

查看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));}

所以圈子需要是＆＃34; d＆＃34;属性集。要做到这一点，我们需要将基准设置为我们想要的圆形对象，在这种情况下，它使用＆＃34; geo＆＃34;工作类型（地理位置）。

因此我们将geo.circle的原点设置为中心的long / lat，以及＆＃34; angle＆＃34;是我们的半径。

然后我们设置属性＆＃34; d＆＃34;要成为一条路径，使用d3.geo.path（），然后＆＃34; project＆＃34;通过在选择中选择当前选定的选项并检索关联的投影，将其添加到形状上。

d3投影过渡中的数据位置

1 个答案: