如何通过d3.js实现连线动画图及编辑器的实例教程？

本文共计2840个文字，预计阅读时间需要12分钟。

连续动画图+编辑器+效果展示。项目主要使用d3.js v4制作，分为两部分，一部分是实际展示的连续动画图，另一部分是管理人员使用鼠标编辑连续动画的页面。对d3.js如何导入图片，如何导入图片进行说明。

连线动画图

编辑器

效果如上图所示。

本项目使用主要d3.jsv4制作，分两部分，一个是实际展示的连线动画图，另一个是管理人员使用鼠标编辑连线的页面。对于d3.js如何引入图片，如何画线等基础功能，这里就不再介绍了，大家可以找一些入门文章看一下。这里主要介绍一下重点问题。

1.连线动画图

此图的主要功能是每隔给定时间，通过ajax请求后台数据，并根据返回的数据动态改变每个图片下方的数值，动态改变连线上的动画流动方向和是否流动。

首先，确定图表中需要配置的内容，如各图片存储位置，连线和动画颜色，图片和连线的坐标等。这些数据需要在html中进行配置，最好写成object对象，赋值给我们自己的图表类的函数。