利用d3.js制作连线动画图与编辑器的方法实例-创新互联

长洲ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

效果如上图所示。

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

1.连线动画图

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

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

var data = {
 element:[{
 image: 'img/work.png',
 pos:[1,1], // 图片位置
 linePoint:[], // 图片发出线段坐标数组
 lineDir:0, // 线段动画方向
 title: '工作'
 }],
 lineColor:'black', // 连线颜色
 animateColor: 'red', // 动画颜色
};
var chart = new Myd3chart('#chart');
chart.lineChart(data);

本文名称：利用d3.js制作连线动画图与编辑器的方法实例-创新互联
文章网址：http://6mz.cn/article/dopcco.html