ckinmind

说明

• 图表类型：折线图(面积图)
• 原图地址：D3 version of animated chart dribbble
• 原图是d3.v3版本实现，这版用v4版本重写了
• 改写后的动画有点问题，问题出在ease上，暂时不知道这个带数值的写法

知识点

• v3版本：d3.time.format("%d-%b-%Y").parse
• v4版本： d3.timeParse("%d-%b-%Y")

ckinmind

说明

• 图表类型：散点图(力图，柱状图)
• 原图地址：Major League Soccer v2
• 图表解释：每个足球队各年的得分变化对比图
• 适用场景：多个对比目标在某个维度(比如时间)下的变化趋势

知识点

• d3.forceSimulation - 创建一个力模拟

ckinmind

说明

• 图表类型：line图(混合散点图，柱状图)
• 原图地址：Bump Chart (Major League Soccer v3)
• 图表解释：每个足球队各年的排位变化对比图
• 适用场景：多个对比目标在某个维度(比如时间)下的变化趋势

知识点