使用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,有新的知识会继续汇总分享给大家。谢谢