D3 学习笔记

选择集

d3.select(), d3.selectAll() 选择元素返回的对象

  • 标签选择
  • # id选择
  • . class选择
  • 支持链式语法

数据绑定

datum(): 绑定一个数据到选择集上

data(): 绑定一个数组到选择集上

使用data() 绑定数据时,数据与元素格式不匹配

  • update 绑定数据
  • enter 元素不够集
  • exit 元素多余集

元素操作

  • append() 附加元素
  • insert() 元素前插入
  • remove() 删除

body.append("p").text("append p element");

添加简单图表

添加画布

添加矩形

  • x:矩形左上角的 x 坐标
  • y:矩形左上角的 y 坐标
  • width:矩形的宽度
  • height:矩形的高度

比例尺

比例尺: 将某一区域的值映射到另一区域,其大小关系不变。

线性比例尺

离散比例尺

坐标轴

  • d3.svg.axis():D3 中坐标轴的组件,能够在 SVG 中生成组成坐标轴的元素。
  • scale():指定比例尺。
  • orient():指定刻度的朝向,bottom 表示在坐标轴的下方显示。
  • ticks():指定刻度的数量。

在SVG中添加坐标轴

添加图示

生成器

读取文件

  • d3.text 读取服务器文本
  • d3.json 读取服务器json数据

折线

线段的第一个点和最后一个会连接,需要使用css打断

指定线段生成器

绘制线段

散点图

过渡效果

动作在初始状态到最终状态之间的变化

散点

布局

布局:计算出适合于作图的数据

弧生成器

添加作图所需分组

添加路径

发表评论