旋转和点击

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

在这个例子中你张贴在 http://bl.ocks.org/johan/1392560

你可以找到：

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是地图的新中点，如[水平，垂直] 它使用旧的地图中点和差（旧 - 新）来计算在鼠标位置。

var m1 = [d3.event.pageX, d3.event.pageY] 
    , o1 = [o0[0] + (m0[0] - m1[0])/8, o0[1] + (m1[1] - m0[1])/8];