d3js-如何使用d3js旋转地图

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相加，作为要在三个轴中的每一个轴上旋转的度数（请参见下面的三轴旋转链接）。听起来你的情况可能是通过在z中旋转-45度来固定的，给出var rotate = [0,0,-45]或var rotate = [0,0,135]。

然后在下面：

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

或者，将地图放在g元素中，并使用g元素上的html转换属性transform=rotate(-45)指定旋转：

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三轴旋转：http://bl.ocks.org/mbostock/4282586

Bostock的"让我们制作一张地图"：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

阿尔伯斯等面积投影用于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])

你应该没事的。