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点移动，闪电侠每一步