如何在正交图中移动点? [英] How to move points in an orthogonal map?

问题描述

我正在尝试在由Mike Bostock创建的以下地图上的某些地理位置添加红点. https://bl.ocks.org/mbostock/3795040 .我的积分显示出来，但不会随地图一起移动.如何编辑代码以使点随地图移动.谢谢.

I am trying to add red points at certain geolocations on the following map created by Mike Bostock. https://bl.ocks.org/mbostock/3795040. My points show up but don't move with the map. How do I edit the code to make the points move with the map. Thank you.

//add circles to svg
svg.selectAll("circle")
    .data([wr,pt,sd,jp,fm])
    .enter()
    .append("circle")
    .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; })
    .attr("cy", function (d) { return projection(d)[1]; })
    .attr("r", "8px")
    .attr("fill", "red");

以下是上面引用的数组.

The following is what the above array being referenced.

//points
var wr = [32.6130007, -83.624201];
var pt = [48.9334357, 8.961208];
var sd = [32.715738, -117.1610838];
var jp = [35.6894875, 139.6917064];
var fm = [39.1137602, -76.7267773];

推荐答案

您必须在mousemove函数中包括圆圈:

You have to include the circles in the mousemove function:

svg.on("mousemove", function() {
    var p = d3.mouse(this);
    projection.rotate([λ(p[0]), φ(p[1])]);
    svg.selectAll("path").attr("d", path);

    //change the circles' positions here:
    svg.selectAll("circle").attr("cx", function(d) {
            console.log(projection(d));
            return projection(d)[0];
        })
        .attr("cy", function(d) {
            return projection(d)[1];
        })
});

以下是更新的bl.ocks: https://bl.ocks.org/anonymousous/2a6f07cdc12838b296674470ad715bbe/54d6de8d73347081f900c88a203019df74f23ade

Here is the updated bl.ocks: https://bl.ocks.org/anonymous/2a6f07cdc12838b296674470ad715bbe/54d6de8d73347081f900c88a203019df74f23ade

PS:有些圆圈似乎移动不正确:不过，它们是正确的.问题是它们落后于.要隐藏这些圆圈，您必须编写另一个函数(此答案范围之外).

PS: Some circles appear to move wrongly: they are correct, though. The thing is that they are behind the globe. To hide those circles you'll have to write another function (which is outside the scope of this answer).

将圆圈隐藏在地球后面的另一种方法是使用path而不是圆圈.这样，投影将自动剪切这些路径.看看: https://bl.ocks.org/anonymous/9e6a23c6a23c6a23c6a23c6a9c2e9c9a7924c2a7246e2a9c6e7a6e2d3e7c6e7a6e7d3d3d3d >

An alternative to hide the circles behind the globe is using a path instead a circle. That way, the projection will automatically clip those paths. Have a look: https://bl.ocks.org/anonymous/9e640195e2c021cd79b5ca9b2238a44c/1c43719a7d6a85d0226cf3c468ac23e570add22d

这篇关于如何在正交图中移动点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！