SDK.CN

数据可视化利器-d3.js

来源:汇智网
时间:多个视屏
难度:中级
播放:727

视频简介

D3.js是一个对数据进行可视化的JavaScript库。d3使用标准的web技术(HTML、SVG、CSS)

章节介绍

 快速入门

  •  hello,data!
  •  数据可视化与d3.js
  •  d3的四把斧:hello,d3
  •  d3第1斧:声明DOM对象集
  •  d3第2斧:声明数据集
  •  d3第3斧:获得结果集
  •  d3第4斧:实施DOM操作

 selection:选择集

  •  选择集/selection
  •  select:选中单个元素
  •  selectAll:选中多个元素
  •  为什么需要选择集?
  •  插入数据驱动环节
  •  each: 定制处理行为

 修改文档:DOM操作符

  •  style: CSS样式操作符
  •  attr: 属性操作符
  •  html:html内容操作符
  •  text:文本内容操作符
  •  append:追加操作符
  •  insert:插入操作符
  •  remove:删除操作符

 交互行为:响应DOM事件

  •  selection.on:事件监听操作符
  •  d3.event:DOM事件对象
  •  d3.mouse:获得鼠标事件位置

 关联数据:data操作符

  •  数据可视化
  •  data:数据操作符
  •  enter:获得未匹配的数据
  •  exit:获得未匹配的DOM元素
  •  数据集:使用简单数组
  •  数据集:使用对象数组
  •  数据集:使用数据函数

 增加感染力:使用转场效果

  •  转场/transition
  •  实现原理:定时器
  •  tween:定制转场计算过程
  •  easing:控制动画的速度
  •  预置的ease效果
  •  style:设置样式目标值
  •  attr:设置属性目标值

 SVG:矢量化图形绘制

  •  SVG
  •  path构造器
  •  曲线构造器
  •  使用x,y访问器
  •  定义插值策略
  •  区域构造器
  •  定制区域构造器的行为
  •  圆弧构造器
  •  定制圆弧构造器的行为

 变换数据值域:使用比例尺

  •  比例尺
  •  线性比例尺
  •  指数比例尺
  •  对数比例尺
  •  时间比例尺
  •  分类比例尺
  •  预置比例尺:调色板
相关工具
SDK.CN

D3.js

最流行的Javascript...

相关视频

推荐工具 意见反馈