D3.js d3js-如何使用d3js旋转贴图

我想用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度。。我不知道如何纠正旋转以正确显示地图

---

任何指针都会很棒

Albers等面积投影用于d3.geo.conicEqualArea（）中，并具有一个.center（）方法，允许您设置投影的中心。您可以在此处动态地看到它的作用：

d3.geo.albers还有一个.center（）方法，因此如果将中心设置为

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

---

你应该会没事的。

我相信这个问题早就解决了，但为了子孙后代：

只需添加

var rotate=[x，y，z]

，其中x，y，z是您希望在三个轴中的每个轴上旋转的度数（请参见下面的三轴旋转链接）。听起来您的案例可能通过在z方向旋转-45度来修复，给出

var rotate=[0,0，-45]

或

var rotate=[0,0135]

然后如下：

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

或者，将地图放在

g

元素中，并使用

g

元素上的html transform属性

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三轴旋转：

博斯托克的“让我们制作一张地图”：

---

谢谢以利亚，尝试过了，但仍然不走运。希望我能上传一张图片，让你看看。不管怎样，让我试一下。假设我需要显示的是“-”，那么图像合成为“\”，所以我想。我需要旋转图像，使其显示为“-”。希望它有意义。此外，我还使用质心法自动找出中心。我几乎得到了相同的中心。只有代码的答案通常可以通过添加解释来改进。

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