1.D3是什么D3的全称是（Data-DrivenDocuments），翻译过来就是一个被数据驱动的文档。简而言之，就是一个主要是用来做数据可视化的JavaScript的函数库。由于它本质上是JavaScript，所以用JavaScript也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，D3已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。
2.什么是数据可视化以及为什么要数据可视化
将枯燥乏味复杂的数据以图形的方式表现出来，这就是数据可视化。如现在有一组数据【5,15,23,78,110,57,29,34,71】，这里的数据不多，还是比较容易直接看出它们的大小关系，但更直观的是用图形显示，如下图：
3.为什么用D3这类js框架来做前端数据可视化
就拿上面数据可视化条形图来举例子，我们用原生js来实现这个效果。
目标：用横向柱状图来直观显示以下数据vardata=[5,15,23,78,110,57,29,34,71];
HTML代码：
#barChart{background:#f0f0f0;padding:10px;font-family:Verdana;color：white；}#barChart.bar{left:0px;height:20px;background:blue;margin:5px;}js代码：
//要展示的数据对象vardata=[5,15,23,78,110,57,29,34,71];;window.onload=function(){//计算data的长度varlen=data.length;//获取容器DOM对象varbarChart=document.querySelector("#barChart");//创建len个div对象，并设置其属性for(vari=0;i 4.D3的几个特点概述 1.选择集使用d3.select()或d3.selectAll()选择元素后返回的对象，就是选择集。D3能够连续不断地调用函数，列如：d3.select().selectAll().text(),这称为链式语法，和JQuery的语法很像。如下示例，用D3来更改文本和样式 d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部 varbody=d3.select("body");//选择文档中的body元素varp1=body.select("p");//选择body中的第一个p元素varp=body.selectAll("p");//选择body中的所有p元素varp=body.selectAll(".car");//选择body中的所有类名为car的元素varsvg=body.select("svg");//选择body中的svg元素varrects=svg.selectAll("rect");//选择svg中所有的svg元素(2)绑定数据D3一个很强大的特点是能将数据绑定到DOM上，也就是绑定到文档上。例如网页中有段落元素和一个整数100，于是可以将整数100与绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。 D3中是通过以下两个函数来绑定数据的：datum()：绑定一个数据到选择集上data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定 接下来分别使用datum()和data()，将数据绑定到以下HTML元素上。 我爱简书 Ilovejianshu
varstr="nightzing";varbody=d3.select("body");varp=body.selectAll("p");p.datum(str);p.text(function(d,i){return"第"+i+"个元素绑定的数据是"+d;});运行结果在上面的代码中，用到了一个无名函数function(d,i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：
d代表数据，也就是与某元素绑定的数据。i代表索引，代表数据的索引号，从0开始。
用data()实现
vardataset=["Ilikefood","Ilikegaoxiao"];varbody=d3.select("body");varp=body.selectAll("p");p.data(dataset).text(function(d,i){returnd;});运行结果以上代码也用到了一个无名函数function(d,i)，其对应的情况如下：
当i==0时，d为Ilikefood。当i==1时，d为Ilikegaoxiao。此时，元素与数组dataset的三个字符串是一一对应的，因此，在函数function(d,i)直接returnd即可。
(3)插入元素插入元素涉及的函数有两个：
append()：在选择集末尾插入元素insert()：在选择集前面插入元素
HTML元素同上，以下代码是插入元素的示例。
/*在body的末尾添加一个p元素*/body.append("p").text("appendpelement")/*在body中id为car的元素前添加一个段落元素*/body.insert("p","#car").text("insertpelement");(4)删除元素删除一个元素时，对于选择的元素，使用remove即可，例如：
varp=body.select("#car");p.remove();三.D3.js实战基础讲完了，下面就为大家介绍几个D3实战的例子，D3提供了许多的SVG图形的生成器，它们都是只支持SVG的。因此，在D3中使用SVG画布来绘制图表是很常见也是被推荐的一种方式。
目标：用横向柱状图来直观显示以下数据vardata=[5,15,23,78,110,57,29,34,71];为了代码简洁方便，直接用数值的大小来表示矩形的像素宽度，同时为了方便理解，元素和样式都都直接在D3的js代码中实现，之前用原生js实现的例子那里的html元素和css样式都可以不要了，直接写下面的代码即可实现效果
varrectHeight=25;//每个矩形所占的像素高度(包括空白)vardata=[5,15,23,78,110,57,29,34,71];svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",20).attr("y",function(d,i){returni*rectHeight;}).attr("width",function(d){returnd;}).attr("height",rectHeight-2).attr("fill","blue");
这段代码最主要的部分是：
svg.selectAll("rect")//选择svg内所有的矩形.data(dataset)//绑定数组.enter()//指定选择集的enter部分.append("rect")//添加足够数量的矩形元素有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了function(d,i)，前面已经讲过，d代表与当前元素绑定的数据，i代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。最后一行代码：.attr("fill","blue")是给矩形元素设置颜色。正式开发中推荐写在CSS文件中去，方便归类和修改。这里为了便于理解，将样式直接写到元素里。