了解D3 TopoJSON转换

我想了解D3 SVG转换为世界地图，允许缩放到一个点击的国家。了解D3 TopoJSON转换

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

例如，我在执行计算以下投影绘制整个世界地图2560×1440的屏幕上：

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元素及其变换属性时，它包含完全不同的值。

我在这里错过了什么？

很高兴为您提供反馈！

最佳，塞巴斯蒂安

来源

2014-04-01 Sebastian B.

如果我明白你想要做的正确，你需要在两次转换之间进行插值。有关地图的示例，请参见[这里]（http://bl.ocks.org/mbostock/3173784）的解释和[这里]（http://bl.ocks.org/mbostock/2206590）。 –

是的，诀窍是用attr路径调用g.selectAll（“path”）.transition（）以在两个投影之间转换！非常感谢你！！ –

...然而，这可能是相当低效的，而变换应该不那么需要资源。 –

您需要两个变换之间的过渡。尽管使用默认的转换效果并不理想，所以您需要自定义插值。有关更多解释，请参见this example。 Here是一个完全符合你想要的地图的例子。

来源

2014-04-01 17:21:38

了解D3 TopoJSON转换

回答

相关问题