盒子
盒子
文章目录
  1. 从一无所知到数据绑定
    1. 为何数据可视化
    2. 为何选择D3.js
    3. 数据可视化流程
    4. 基本构建模块
    5. D3第一步
    6. 添加DOM元素
    7. 添加SVG元素
    8. 将数据绑定到DOM元素上
    9. 使用在DOM元素中的数据
  2. 使用数据来可视化
    1. 基于数据创建SVG元素
    2. 使用SVG坐标空间
    3. D3.js接受的数据结构
    4. 使用D3.js简化代码
    5. SVG基本形和D3.js
    6. SVG Path和D3.js
    7. 动态SVG坐标空间
    8. D3.js缩放
    9. SVG Group元素和D3.js
    10. SVG Text 元素
    11. SVG坐标轴元素

A Glance at D3.js

2014-05-18 | Liu Yuyang | javascript

这几天，嗯，跟着Dashing D3.js把传说中的D3.js入了个门。

D3在创建基于浏览器的动态数据可视化并带交互真是方便。

从一无所知到数据绑定

为何数据可视化

  • 一图胜千言，图形是直观的。
  • 图形是简洁明了的表达方式
  • 世界的数据量是巨大的，图形是好的分析和展示方式
  • 数据是新的石油

为何选择D3.js

  • D3.js 是基于数据操作文档的JavaScript库。D3帮助你使用HTML，SVG和CSS生动地展现数据。D3不需要你使用某个特定的框架，它的重点在于对主流浏览器的兼容，同时结合了强大的虚拟化组件，以数据驱动的方式去操作DOM。
  • D3.js由Mike Bostock基于他在斯坦福可视化小组的工作开发，现由其所在的纽约时报赞助。很多贡献者参与到项目的开发，你可以在github上找到这个项目。
  • D3.js是指Data Driven Documents。当你的网页想要和数据进行交互时，D3是个好的选择。
  • D3.js被应用到web应用的前端，即用户交互部分。

数据可视化流程

Ben Fry数据可视化流程：

  • 获取
  • 解析
  • 过滤
  • 挖掘
  • 呈现
  • 提炼
  • 交互

基本构建模块

  • 现代浏览器
  • HTML
  • CSS
  • Javascript
  • DOM
  • SVG
  • Web Inspector

D3第一步

  • 在HTML文件中引用云端或本地js库
  • 在Web Inspector控制台中测试

添加DOM元素

  • select
  • append

添加SVG元素

  • js的分行特性
  • style操作符
  • 链式语法
  • select可以被保存赋值

将数据绑定到DOM元素上

  • selectAll
  • data操作符
  • 虚选择–Thinking with Joins
  • enter/exit/update
  • 对虚选择的append
  • text操作符
  • 数据在__data__属性中

使用在DOM元素中的数据

  • 向D3.js操作符参数传递函数，
  • 函数第一个参数是__data__内容。

使用数据来可视化

基于数据创建SVG元素

  • 创建SVG容器
  • 创建形状元素，比如circle
  • 将数据绑定到形状元素(基本靠虚选择完成)
  • 使用style利用数据修饰SVG元素

使用SVG坐标空间

  • 一图胜千言：

    ———————-> x
    | o
    |
    |
    |
    |
    |
    |
    |
    |
    v y

  • append('svg')作为坐标空间

  • 在SVG坐标空间内放置SVG元素。attr
  • 创建SVG元素放置SVG元素
  • 将数据绑定到SVG元素上
  • 利用绑定的数据改变SVG元素的位置
  • 使用绑定的数据修饰SVG元素

D3.js接受的数据结构

  • select到的是数组
  • D3可以加载外部资源，好多种类
  • JSON(key一定是字符串)
  • JSON数组

使用D3.js简化代码

  • 将JSON对象绑定到__data__属性上
  • 使用绑定的JSON对象变更SVG元素

SVG基本形和D3.js

流程固定，设置svg容器，绑定数据，append形状元素，设置必要属性和样式。

  • circle
  • rect
  • ellipse
  • line
  • polyline/polygon

SVG Path和D3.js

  • 一个用来画画的SVG内置语言
  • 使用D3.js生成形状元素绘制程序(D3.js Path 数据生成器)

动态SVG坐标空间

论如何通过遍历所有数据找到图像边界。

D3.js缩放

将某个Domain映射到一个Range上的对象/类/函数。

  • d3.scale.linear.domain([1,100]).range([0,1])
  • d3.max
  • d3.min
  • 还有些其它量化的和非量化的缩放。

SVG Group元素和D3.js

  • 可嵌套的<g>用来分组
  • transform属性和从右到左执行各种tranforming(matrix/translate/scale/skewX/skewY)
  • transform的转换是相对空间坐标的转换
  • 使用D3.js来分组SVG元素(append)
  • 使用D3.js来转换SVG元素(attr)

SVG Text 元素

  • text标签及属性, 比如text-anchor属性
  • 使用D3.js创建Text元素，绑定数据，使用数据。

SVG坐标轴元素

  • D3的坐标轴组件，包括水平与竖直坐标轴线、刻度、合适的分隔空间等等。
  • 坐标轴可以更清晰展现变量大小和关系
  • 坐标轴的范围，是否反转、类型、单位等
  • 生成D3.js坐标轴函数(d3.svg.axis().scale($SCALE))
  • 调用坐标轴函数(var xAxisGroup = svgContainer.append("g").call($FUNCTION);)生成坐标轴元素组。
  • 最后创建坐标轴(最上层)

然后忽然没了？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

准备继续看Scott Murray的D3.js教程