瞭解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轉換

回答

相關問題