如何用d3.js制作长尾词连线动画图并实现编辑功能？

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

使用在线动画图+编辑器+效果展示的方式。项目主要使用d3.js v4制作，分为两部分，一部分是实际展示的在线动画图，另一部分是管理人员使用鼠标编辑在线的页面。对于d3.js，如何引入图片？

连线动画图

编辑器

效果如上图所示。

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

1.连线动画图

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

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