Question

我正在努力了解D3 SVG转换的世界地图，允许缩放到点击的国家。

我目前的实现能够绘制世界地图并将其缩放到任何分辨率全屏幕。此外，它可以为特定国家或国家集合计算相同的数据。

例如，我的实现计算了以下用于在2560x1440屏幕上绘制整个世界地图的投影：

d3.geo.mercator()
  .center(22.266249946553817,41.93985624315233)
  .scale(265.88042450605)
  .translate(1336.2192475286854,576.7978959424244)

例如，如果应该绘制德国以适应屏幕，那么实现将计算以下预测：

d3.geo.mercator()
  .center(10.36090255016238,51.05100408657832)
  .scale(5575.925124835363)
  .translate(1279.7901899016058,608.1878627921983)

现在我想以动画的方式在两个视图之间进行转换，但是我无法理解svg＆＃34;转换＆＃34;我需要附加到路径组的属性。

如何在两个投影之间进行转换？我以为我可以做到：

translate(1336.2192475286854,576.7978959424244)   //projection.translate() worldmap view
scale(5575.925124835363)                          //scale computed for Germany
translate(1279.7901899016058,608.1878627921983)   //offset computed for Germany

但在检查＆＃34; g＆＃34; DOM元素及其transform属性，它包含完全不同的值。

我在这里缺少什么？

很高兴收到任何反馈意见！

最佳，塞巴斯蒂安

Answer 1

您需要在两个转换之间进行转换。使用默认转换会产生令人不满意的结果，因此您需要自定义插值。有关更多说明，请参阅this example。 Here是一个使用地图完全符合要求的示例。

了解D3 TopoJSON转换

1 个答案: