了解 D3 TopoJSON 转换答案

【问题标题】：Understanding D3 TopoJSON transformations了解 D3 TopoJSON 转换
【发布时间】：2014-05-12 12:05:10
【问题描述】：

我正在尝试了解允许缩放到点击的国家/地区的世界地图的 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“转换”属性。

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

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

但在检查“g”DOM 元素及其变换属性时，它包含完全不同的值。

我在这里错过了什么？

很高兴收到任何反馈！

最好，塞巴斯蒂安

【问题讨论】：

如果我理解您要正确执行的操作，则需要在两个转换之间进行插值。有关说明，请参阅 here，有关地图示例，请参阅 here。
是的，诀窍是使用 attr path 调用 g.selectAll("path").transition() 以在两个投影之间进行转换！非常感谢！！
...然而，这可能效率很低，而转换对资源的要求应该较低。
很好，它解决了您的问题。我将其添加为参考答案。

标签： svg d3.js transform projection topojson

【解决方案1】：

您需要在两个转换之间进行转换。但是，使用默认转换会产生不令人满意的结果，因此您需要自定义插值。有关更多解释，请参阅this example。 Here 是一个示例，它可以完全按照您的意愿使用地图。

【讨论】：