Browse Tag: d3

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打断

指定线段生成器

绘制线段

散点图

过渡效果

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

散点

布局

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

弧生成器

添加作图所需分组

添加路径

D3教程

集群图

http://www.ourd3js.com/wordpress/?p=245

资料

D3.js 飞速入门 http://edu.csdn.net/course/detail/1665

1. 第一个D3程序
2. 制作柱形图 
3. 为柱形图添加坐标轴 
4. 用生成器制作折线图 
5. 有动态效果的散点图 
6. 布局的简单应用

CSDN博客 http://blog.csdn.net/lzhlzz

OUR D3.JS http://www.ourd3js.com/wordpress/?p=2209#more-2209

数据可视化与 D3.js http://edu.csdn.net/course/detail/17951. 数据可视化

  1. 数据可视化
    1.1 计算机图形学
    1.2 历史简介
    1.3 目的
    1.4 常用工具
    2. D3.js
    2.1 简介
    2.2 选择集和数据绑定
    2.3 布局

精通D3.js:交互式数据可视化高级编程