利用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制作连线动画图与编辑器的方法实例-创新互联
文章起源：https://www.cdcxhl.com/article20/dopcco.html

成都网站建设公司_创新互联，为您提供响应式网站、外贸网站建设、营销型网站建设、App开发、网页设计公司、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容