腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >理解D3 TopoJSON变换

问理解D3 TopoJSON变换
EN

Stack Overflow用户

提问于 2014-04-01 07:40:33

回答 1查看 855关注 0票数 0

我试图理解世界地图的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)

现在，我想以动画的方式在这两个视图之间进行转换，但不知怎么地，我无法理解我需要附加到path组的svg " transform“属性。

我如何在这两种预测之间进行转换？我想我能做的就是：

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

我在这里错过了什么？

很高兴收到任何反馈！

最好，塞巴斯蒂安

svg

d3.js

transform

projection

topojson

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-01 09:21:38

您需要在这两个转换之间进行转换。但是，使用默认的转换会带来不满意的结果，因此您需要一个自定义的内插。有关更多解释，请参见这个例子。这里就是一个用地图做你想做的事情的例子。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22790569

复制

相似问题

问理解D3 TopoJSON变换
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问理解D3 TopoJSON变换EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问理解D3 TopoJSON变换
EN