旋轉和點擊

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];