d3 mysql_D3可视化库的使用指南

D3 的全称是(Data-Driven Documents)，顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本教程主要介绍D3一些最基本的使用方法，以及生成一些比较简单的图表。学习 D3 最好的地方是：http://d3js.org/ 。

D3可视化库的安装

D3 是一个 JavaScript 函数库，并不需要通常所说的“安装”。它只有一个文件，在 HTML 中引用即可。有两种方法：

下载 D3.js 的文件

解压后，在 HTML 文件中包含相关的 js 文件即可。

还可以直接包含网络的链接，这种方法较简单：

但使用的时候要保持网络连接有效，不能在断网的情况下使用。

预备知识

学习D3可视化库需要的一些基础知识如下：

HTML：超文本标记语言，用于设定网页的内容

CSS：层叠样式表，用于设定网页的样式

JavaScript：一种直译式脚本语言，用于设定网页的行为

DOM：文档对象模型，用于修改文档的内容和结构

SVG：可缩放矢量图形，用于绘制可视化的图形

基本操作

1、添加元素

d3.select("body").append("p").text("New paragraph!");

为选择body标签，为之添加一个p标签，并设置它的内容为New paragraph！

源代码：

D3测试

d3.select("body").append("p").text("New paragraph!");

效果：

效果图

2、数据绑定

D3可以处理哪些类型的数据？

它会接受几乎任何数字数组，字符串，或对象(本身包含其他数组或键/值对)。它可以处理JSON和GeoJSON

源代码：

testD3-1.html

This is my HTML page.

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("p")

.data(dataset)

.enter()

.append("p")

.text("New paragraph!");