d3.js学习笔记-01(SVG、图形)

d3.js学习笔记-01

1. 基础概念

D3全称为Data-Driven Documents(数据驱动文档)，是一个JavaScript函数库，用于做数据可视化，允许绑定任意数据到DOM，然后根据数据来操作文档，创建可交互式的图表。

1.1 D3的优势：

• 数据能够与DOM绑定在一起
  • 数据转换和绘制是独立的
  • 代码简洁
  • 大量布局，能够适用于各种图表的制作
  • 基于SVG，缩放不会损失精度

1.2 D3的适用范围：

d3开发的应用时显示在网页上的，因此开发者需要将数据置于服务器端，并在玩也文件中插入D3代码，用户通过浏览器请求此网页文件，即可看到可视化的内容。

1.3 D3学习网站

• D3官方网站
• D3创始人制作，含有大量说明文档
• 简单易懂的教程，让人迅速高效地掌握D3
• 吕之华站点，有一系列教程(无法获取)
• 类似社区，里面有很多例子，也可以进行交流

2. 关键知识

2.1 SVG定义

SVG是可缩放矢量图形，用于藐视二维矢量图像的一红图形格式，使用XML格式来定义图形。
矢量图由线段和曲线来定义，具有文件小、不易失真、线条/颜色平滑等优点，不适合表现高复杂度的图形。

2.2 SVG图形元素

需要绘制的图形都要添加到一组svg标签之间，SVG中预定义了其中元素：矩形、原型、椭圆、线段、折现、多边形、路径；

• 矩形：<rect />

• 圆形：<circle />

• 椭圆：<ellipse />

• 线段：<line />

• 多边形 or 折线：<polygon /> or <polyline />

• 路径：<path />

与折线图类似，通过给出一系列点坐标来绘制；给出一个坐标点，在坐标点前面添加一个英文字母，表示是如何运动到次坐标点的，英文字母有5类，大写字母表示绝对坐标，小写字母表示相对坐标。

例子

1 绘制直线

2 绘制二次贝塞尔曲线

3 绘制弧线

2.3 SVG文字

svg的文字使用标签<text> </text>

2.4 SVG常用样式

2.4 SVG标记(marker)

常用于给线段加箭头
— 定义标记

— 使用标记

2.3 SVG滤镜与渐变(省略)

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶1-3,12,36,40-51.