A Glance at 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

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

• select
• append

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

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

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

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

• 一图胜千言：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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