D3.js绘制柱状图及交互动画详解.pptx

柱状图李伟

课堂目标熟练的使用d3绘制基础图表掌握d3中比例尺的用法可以用d3为图形添加鼠标交互事件和动画

知识点综述坐标轴绘图区鼠标事件transition动画缓动跟随

坐标轴坐标轴的绘制需要比例尺。d3中的比例尺可以让我们自己建立一个坐标轴,并且可以将图表点位解析为像素点位。比例尺类型:scaleBand分段比例尺,适用于类目轴scaleLinear线性比例尺,适用于数值轴更多坐标轴生成器:axisBottom刻度朝下的坐标轴生成器axisLeft刻度朝左的坐标轴生成器更多

建立绘图区的基本步骤建立绘图区相关的基础数据架构绘图区的DOM结构设置每个柱状体的x、y位置和width、height尺寸

鼠标事件使用on方法可以为selector对象添加鼠标事件,如鼠标划上mouseover、鼠标移动mousemove、鼠标划出mouseout

transition动画补间动画是在两个关键帧之间,以某种算法自动计算物体运动的插值,从而形成一种过度效果。d3中建立补间动画的方法:transition建立关键帧duration当前关键帧到上一个关键帧的距离ease插值算法,动画以何种姿态完成过度,on监听补间事件start动画开始时end动画结束时

缓动动画的原理-等比数列使用缓动跟随,可以如提示缓缓的跟着鼠标移动。举个例子:闪电侠从A点向B点移动,闪电侠每一步

文档评论(0)

1亿VIP精品文档

相关文档