d3js - 如何使用d3js旋轉地圖

我正在嘗試使用d3顯示澳大利亞。我中心我地圖，所以它會正確顯示無法將其旋轉屬性..d3js - 如何使用d3js旋轉地圖

下面是相關的代碼，

var projection = d3.geo.albers().scale(1).translate([0,0]); 
var path = d3.geo.path().projection(projection); 
var bounds = path.bounds(topojson.feature(dataSet, dataSet.objects.abs_aus_ced_2007)); 
var scale = 0.95 /Math.max((bounds[1][0] - bounds[0][0])/width, (bounds[1][1] - bounds[0][1])/height); 
var translate = [(width - scale * (bounds[1][0] + bounds[0][0]))/2, (height - scale * (bounds[1][1] + bounds[0][1]))/2]; 

projection.scale(scale).translate(translate); 

path = d3.geo.path().projection(projection);

地圖順時針旋轉大約80度。我不能工作了解如何糾正旋轉以正確顯示地圖。

任何指針都會很棒！

來源

2013-12-10 genwip

Albers等面積投影在d3.geo.conicEqualArea（）中使用，並有一個.center（）方法，允許您設置投影的中心。您可以在行動中看到它動態地在這裏：

http://bl.ocks.org/mbostock/3788999

d3.geo.albers也有.center（）方法，所以如果您的中心設置爲

var projection = d3.geo.albers().scale(1).translate([0,0]).center([133.5, 24.25])

你應該罰款。

來源

2013-12-10 07:20:08 Elijah

感謝利亞，嘗試，仍然沒有luck..wish我可以上傳圖片，所以你可能需要看。讓我有一個去任何方式..小兒子說，如果' - '是我需要顯示，圖像正在合成爲'\'，所以我認爲..我需要旋轉圖像，以便它出現'' - 」。希望它是有道理的。此外，我也使用質心法自動找出中心。我幾乎得到了相同的中心.. – genwip

我敢肯定，這早已解決，但爲後人：

剛剛與X，Y，Z爲你想在三個軸的旋轉度數增加var rotate = [x,y,z]（見3軸旋轉鏈接在下面）。聽起來像你的情況可能通過在-45度旋轉固定，給予var rotate = [0,0,-45]或var rotate = [0,0,135]。

然後如下：

projection.scale(scale).translate(translate).rotate(rotate);

或者，把你的地圖在g元素，並使用HTML轉換屬性transform=rotate(-45)的g元素指定旋轉：

var trans_x = (width - scale * (bounds[1][0] + bounds[0][0]))/2 
var trans_y = (height - scale * (bounds[1][1] + bounds[0][1]))/2 
var rotation = 135 
var svg = d3.select('#your_viz_container') 
      .append('g') 
      .transform('translate('+trans_x+','+trans_y+') rotate('+rotation+')')

那麼你的路徑追加到旋轉的g。

D3 3軸旋轉： http://bl.ocks.org/mbostock/4282586

博斯托克的「讓我們的地圖」： http://bost.ocks.org/mike/map/

來源

2014-03-13 14:53:41

d3js - 如何使用d3js旋轉地圖

回答

相關問題