d3.js - d3js - 如何使用 d3js 旋转 map

Question

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

这里是相关代码，

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

map 顺时针旋转了大约 80 度。我不知道如何更正旋转以正确显示 map 。

任何指针都会很棒!!

Answer 1

我确定这早就解决了，但为了后代:

只需添加 var rotate = [x,y,z] 并将 x,y,z 作为您想要在三个轴中的每个轴上旋转的度数(参见 3 轴旋转链接以下)。听起来你的情况可能通过在 z 方向旋转 -45 度来解决，给出 var rotate = [0,0,-45] 或 var rotate = [0,0,135].

然后在下面:

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

或者，将 map 放在 g 元素中，并使用 g 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 的“让我们制作一张 map ”: http://bost.ocks.org/mike/map/