随笔分类 -  d3

d3 插值-实现一个简单的 animation
摘要：本篇介绍插值的一种典型应用 动画: (搜索关键词: 补间动画) 要实现一个动画, 一般会在动画过程中定义关键帧, 然后在帧之间创建"补间": 计算出在每一个时间点下物体的形状、位置、颜色等信息, 然后绘制物体即可； 一个简单的支持插入关键帧的动画方法, 以下是完整示例代码； <!DOCTYPE ht 阅读全文
posted @ 2020-11-25 01:45 芋头圆 阅读(149) 评论(0) 推荐(0)
d3 使用记录: 树形图
摘要：先上效果图: 对应源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti 阅读全文
posted @ 2020-10-10 11:03 芋头圆 阅读(660) 评论(0) 推荐(0)
d3 使用记录: 插值
摘要：插值: 插值有很多种实现, 常用的如线性插值; 插值的概念适用于大多数场景 如动画，通过计算出每一帧的形状, 位置, 绘制出逐帧画面 曲线，通过插值, 计算出位置点, 链接样条可以得到近似曲线 一个简易实现 function ease(start, end) { var generate = nul 阅读全文
posted @ 2020-10-09 15:31 芋头圆 阅读(614) 评论(0) 推荐(0)
d3 使用记录: Selection
摘要：假设有这么一个需求: 给定一组数据，然后要绘制一个可交互的，可动态变化，并拥有良好性能的图形。这个图形可能是条形图，散点图，树或是其他任何形式。限你两个星期做出来 --咳咳.. 也许为了能快速应对，会对当前的某一个图具体的去画出来（自己也这么搞过）。但毕竟只是权宜之计，有没有一种方式可以满足上述需求 阅读全文
posted @ 2020-10-09 14:04 芋头圆 阅读(334) 评论(0) 推荐(0)