Question

我有这段代码：

    d3.json("world-countries.json", function(collection) {
      feature = svg.selectAll("path")
          .data(collection.features)
          .enter().append("svg:path")
          .on("mouseover", function(d) { d3.select(this).style("fill",
                "#ffffff"); })
          .on("mouseout", function(d) { d3.select(this).style("fill",
                "#000000"); })
          .on("click", click)
          .attr("d", clip);

然后我的'点击'功能

    function click() {
        var o1 = projection.invert(d3.mouse(this));
        var lat = o1[0]
        lon = o1[1];
        console.log([o1]);
        projection.origin([o1]);
        circle.origin([o1]);
        refresh();
    }

这是演示http://bl.ocks.org/2876083

当我点击svg时，地图消失了！

你如何做到这一点，地球旋转并以“点击”点为中心？

Answer 1

在您发布的示例中 SQL FIDDLE

你可以找到：

var testalt = (from altt in CS.test
group altt by altt.Unique_Id into g
join bp in CS.alerts on g.FirstOrDefault().Unique_Id equals bp.Unique_Id
select new ABCBE
{
ABCName= bp.Name,
number = bp.Number,
Unique_Id =  g.Key,
Version = g.Max(x=>x.Version)
});

您需要修改function mousemove() { if (m0) { var m1 = [d3.event.pageX, d3.event.pageY] , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8]; projection.origin(o1); circle.origin(o1); refresh(); } }。

o1是水平鼠标位置（用于计算水平变化）

event.pageX是垂直鼠标位置。

event.pageY是地图的新中点，因为 [水平，垂直] 它是使用旧地图中点和鼠标位置（旧 - 新）的差值计算的。

o1

单击旋转和居中地球

1 个答案: