D3笔记01——D3简介与安装

1 D3简介

发布于2011年，全称Data-Driven Documents，直译为“数据驱动的文档”。

简单概括为一句话：D3是一个Javascript的函数库，是用来做数据可视化的。
文档指DOM，即文档对象模型（Document Object Model）。D3允许用户绑定任意数据到DOM，然后根据数据来操作文档，创建可交互式的图表。

由于D3是Javascript的函数库，故它也是一个js文件，也常称为D3.js。

2 D3安装

1）安装D3:

在<script>中引入D3文件即可

官方下载的D3文件名为，d3.zip，里面有三个文件，d3.js、d3.min.js（压缩版）以及LICENSE（版权许可证文件）

也可以通过网络引用d3文件:

在head标签中加入<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>

可以发现http://d3js.org/d3.v5.min.js中使用的是v5版本，如果想使用v3版本，将v5改成v3即可。

2）搭建服务器（可选）

安装Apache

3）例子：

1⃣️页面中输出hello world

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var p = d3.select("body")
  .selectAll("p")
  .text("Hello World!");
p.style("color","red");
p.style("font-size","72px");
</script>

2⃣️页面中画一个圆

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.append("circle")
   .attr("cx","50px")
   .attr("cy","50px")
   .attr("r","50px")
   .attr("fill","red");
</script>