svg、canvas、css3d实现数据可视化(伪3d)

最新推荐文章于 2024-09-18 15:20:38 发布

长是人千离

最新推荐文章于 2024-09-18 15:20:38 发布

阅读量7.7k

点赞数 5

分类专栏：前端文章标签： svg 地图数据可视化悬浮事件 canvas

本文链接：https://blog.csdn.net/qq_30227429/article/details/81478877

版权

本文汇总了使用SVG、Canvas和CSS3D实现的数据可视化组件，包括星球环绕旋转图、地图、二维饼图（风车图）、三棱锥和长方体的制作过程，详细介绍了每种方法的步骤和技术要点，如动画效果、悬浮事件处理和几何形状的绘制计算。

摘要由CSDN通过智能技术生成

前言：

这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。

分为如下：

星球环绕旋转图 -- 方法一： svg：animateMotion+ animateTransform 方法二：css3d
地图 -- svg渲染 + div悬浮框 + js事件
二维饼图（风车图） -- canvas： dragCircle 、 stopDragging
三棱锥 -- canvas + 对数排列
长方体 -- css3d + 增量增长
雨刮器（扇型饼图） -- zrender

星球环绕旋转图

效果展示：

有些图片（例如下面这个jpg动图）太大，进行了一定程度的压缩，有点模糊（＾_＾）。

我的碎碎念（*＾3＾）：
之所以出现两个版本的原因：本来用svg实现了一版，结果后来我这个星球的svg和同事的其他动画svg冲突了(⁎⁍̴̛ᴗ⁍̴̛⁎)，发生了巨大改变，本身svg又臭又长，改的太累，干脆用css3d重新画一个了( ´▽｀)。

步骤：

方法一：svg的animateMotion属性 + animateTransform属性

／／举例一个星球的动画
<animateMotion dur="6s" begin="0" repeatCount="indefinite">
  <mpath xlinkHref="#Path-12" /> //轨迹动画
</animateMotion>
<animateTransform ／／自身动画，靠近我的时候星球变大，远离我时变小
  id="first"
  attributeType="XML"
  attributeName="transform"
  type="scale"
  begin="0;second.end "
  from="1"
  to="0.512"
  dur="3s"
  fill="freeze"
/>
<animateTransform
  id="second"
  attributeType="XML"
  attributeName="transform"
  type="scale"
  begin="first.end"
  from="0.512"
  to="1"
  dur="3s"
  fill="freeze"
/>

方法二：css3d

参考链接：https://www.jianshu.com/p/2b85973ad1ed

html:

 <!-- 轨道 -->
<div class="orbit">
  <!-- 行星 -->
  <div class="planet planet1">
    <!-- <span class="name"></span> -->
  </div>
  <div class="planet planet2">
    <!-- <span class="name"></span> -->
  </div>
</div>

css:

.orbit { //轨道旋转，公转
  border: 5px solid red;
  transform-style: preserve-3d;
  padding: 65px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  animation: orbit-rotate 10s linear infinite;
}
.planet { ／／星球自转
  width: 50px;
  height: 50px;
  background: url('../../img/ball1.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  animation: self-rotate