入门者--初学使用D3.js完成一个简单的柱状图

使用d3.js的原因
d3.js简介
d3.js安装
d3.js知识储备
d3.js 实现图表

首先先学习几个d3.js的方法：

实现柱状图

使用d3.js的原因

公司接手了一个数据可视化的项目，选择使用d3.js来完成仪表盘的搭建，可是难为死我这从未接触过d3的小白，主要原因是：定稿设计图还没有出，很难在E chart上找到准确匹配与之一摸一样的样式及功能的demo，所以选择自己动手绘制仪表板。在网上扒拉了好长时间能够完成一个简单图表分享给大家，如有错误欢迎大家批评指正。

d3.js简介

D3的官网上是这样描述的：
D3（数据驱动文档或D3.js）是一个JavaScript库，用于使用Web标准可视化数据。D3可帮助您使用SVG，Canvas和HTML将数据变为现实。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，为您提供现代浏览器的全部功能，并可自由地为您的数据设计正确的可视界面。
自我觉得：
d3.js的语法和jq的语法比较相向，会用jq的程序猿可能用起来会更亲切一点。都是才有链式语法，可以让代码结构更清晰。

d3.js安装

首先我们要进行环境的搭建，有两种方式：
第一种下载d3.js的zip，解压后，在 HTML 文件中包含相关的 js 文件即可。
第二种直接引入用<script>标签引入：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>，但是这种方法要保持网络链接。

d3.js知识储备

html 超文本标记语言，用来搭建网站的结构
css 层叠样式表，用来设置网站的样式
JavaScript 一种脚本语言，用来设定网站行为
DOM：文档对象模型，用于修改文档的内容和结构
SVG：可缩放矢量图形，用于绘制可视化的图形
乍一看完成一个图表还需要会这么多东西，没事的，本文只是完成一个简单的demo，旨在给大家介绍一下d3.js的基本语法。

d3.js 实现图表

首先先学习几个d3.js的方法：

选中元素
d3.select("XX") 选中符合条件的第一个元素
d3.selectAll("XX") 选中所有符合条件的元素
当然括号里也可以写#XX 用来选中id为XX 的元素，同理class 也可以用 .XX 来实现。d3.js选中后返回的是一个对象，成为选择集。
绑定数据
数据绑定也有两种方法：
第一种：绑定单个数据 datum()，可以把某个数值绑定到select()获取到的元素身上。
例如：代码如下

<p>hello word</p>
<p>hello word</p>
<p>hello word</p>

通过select（）来改变<p>标签里内容

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
 d3.select("body").selectAll("p").text("哈哈");

显示结果如图：在这里插入图片描述
用datum()把单个数据绑定到DOM元素身上。
html内容还是如上面代码一致，js代码如下：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
  var str="china";
  var p=d3.selectAll("p");
  p.datum(str);
  p.text(function(d, i) {
        return "第"+i+"个绑定的是"+d; //i代表索引，d代表数据，也就是把d绑定到第i个元素上
    })
</script>

效果如图：在这里插入图片描述
第二种方法：data()，可以把一个数组的每一项分别绑定到与之索引相对应的元素上，代码如下：
html代码同上，这里就不写引入d3.js的代码

var arr=[1,2,3]
var p=d3.selectAll("p");
p.data(arr)
p.text(function(d, i) {
       return "第"+i+"个绑定的是"+d;
   })

实现效果如下：在这里插入图片描述

插入，删除元素
具体实例就不再单独掩饰。

 append()  在元素的末位添加一个元素；
 inset()   在选中的元素的前面添加一个元素；
 remove()  删除选中的元素

实现柱状图

有了上面的基础，我们完成柱状图就简单多了。

在svg中rect代表矩形

    var width=300;//定义画布的宽度
    var height=600;//定义画布的高度
    var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//把画布添加到body下，并设置高度，宽度，arrt的意思就是设置该元素的样式属性为什么什么
    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
    var rectHeight=25;//每个矩形所占的像素高度（包括空白）
    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
    //上面这段代码的意思是：
    //选中所有的矩形
    //绑定数据
    //.enter()的意思是，如果数据源大于选中的元素数量，就要使用append（）方法，添加新的元素。
    //添加新的矩形
    //设置x坐标为20
    //设置y坐标
    //设置高度
    //设置颜色

效果图如下：在这里插入图片描述
这样我们的柱状图就完成了，但是只是很简答的实现，我也是初次学习d3.js，只是把我学习到感觉有用的东西分享出来，不足之处还望大家指出批评，我也会及时改正。接下来还是谁继续学习d3.js，有新的知识会继续汇总分享给大家。谢谢