Question

我正在尝试使用d3显示澳大利亚。我可以居中我的地图，但无法旋转它的属性，所以它正确显示..

以下是相关代码

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度。我无法弄清楚如何纠正旋转以正确显示地图。

任何指针都很棒!!

Answer 1

我确定这已经很久了，但对于子孙后代：

只需将var rotate = [x,y,z]与x，y，z一起添加为要在三个轴中的每个轴上旋转的度数（请参阅下面的3轴旋转链接）。听起来像你的情况可以通过在-45度旋转z来固定，给出var rotate = [0,0,-45]或var rotate = [0,0,135]。

然后在下面：

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

或者，将地图放在g元素中，并使用transform=rotate(-45)元素上的html转换属性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

Bostock＆＃34;让我们制作一张地图＆＃34;： http://bost.ocks.org/mike/map/

Answer 2

center = function( latitude, longitude ){
  var center = [ parseInt(longitude) * -1, parseInt(latitude) * -1 ];
  d3GlobeProj.rotate(center);
  d3Globe.refresh();
}

Answer 3

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

你应该没事。

d3js - 如何使用d3js旋转地图

3 个答案: