如何将地图要素转换为具有SVG路径的圆?

时间:2017-06-25 23:25:59

标签: d3.js svg transition interpolation svg-path

我正在尝试使用d3.js在两个SVG视图之间进行切换。目的是能够在显示之间交替:

  • 经典的等值区域图(颜色代表测量的地图)
  • 气泡图,其中半径与该地区的人口成比例

enter image description here

请参阅here了解演示。

然而,从任意SVG路径转换到(近似)圆圈并不简单。我有以下问题:

  1. 地图的某些区域可能包含岛屿或飞地;更一般地,SVG path可以包含独立的环。 (我原以为d3会将多边形渲染成几个path但不是!)另一方面,圆圈只有一个圆环。 如何在过渡期间平滑较小的多边形?(我认为合并环在一起太复杂了,不值得。)我想到了多边形的褪色或缩小,但我怎样才能在实践中实现呢?因为我不确定是否可以在d的{​​{1}}属性中挑出一个响铃。
  2. 小区域由几个点表示,将这几个点转换为圆形会产生一个顶点太少的多边形看起来像一个实际的圆形(见下图); path的{​​{1}}属性中平滑添加点数的好策略是什么?;
  3. 或者,不是向虚线添加点,也可以将直线过渡到Bézier曲线(4个点和足够的锚已经产生圆的a very good approximation。由于my own attempt不具说服力,所以这是第三个问题:如何在直线和贝塞尔曲线之间转换?
  4. 最后,在两个方向的过渡开始时,我在一些(但不是全部)形状中得到尖峰/条纹;任何想法可能来自哪里?
  5. Spikes + polygon effects Spikes + enclaves and islands

0 个答案:

没有答案