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

任何提示都将非常棒！

- genwip

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

Bostock的“让我们制作一张地图”： http://bost.ocks.org/mike/map/

- Dick Fox

Answer 2

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

- Kieran

---

仅提供代码的答案通常可以通过添加解释来改进它们。 - Jason Aller

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

你应该没问题。

- Elijah

---

谢谢Elijah，我尝试过了仍然没有成功...希望我能上传一张图片，这样你就可以看看了。无论如何让我试试...假设如果“-”是我需要显示的内容，图像显示为“\”，因此我认为...我需要旋转图像，以便它显示为“-”。希望有意义。另外，我还使用质心法自动找到中心..我基本上得到了相同的中心.. - genwip