D3.js学习笔记二:D3.js语法规范

2015年02月11日 javascript 暂无评论 阅读 152 views 次

标准的D3.js文档语法示例

我们使用如下的文档产生一个类似柱形图的图形,借此说明D3.js的语法规范:

<!DOCTYPE html>

<html><head>
<title>语法演示.htm</title>
<script type="text/javascript" src="js/d3.js"></script>
</head>
<body>
<script type="text/javascript">
var h=600;
//设置数据集
var dataset = [ 0, 100, 200, 300,400,500];
//定义画布
var svg = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", h);

//添加对象
var bar = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect");

//设置对象属性(单个)
bar.attr("x", function(p) {
return p;
})

//设置对象属性(多个)
bar.attr("y",function(p){return h-p;})
.attr("width", 90)
.attr("height", function(p) {
return p;
})
.attr("fill","#09F");
</script><svg width="600" height="600"><rect x="0" y="600" width="90" height="0" fill="#09F"></rect><rect x="100" y="500" width="90" height="100" fill="#09F"></rect><rect x="200" y="400" width="90" height="200" fill="#09F"></rect><rect x="300" y="300" width="90" height="300" fill="#09F"></rect><rect x="400" y="200" width="90" height="400" fill="#09F"></rect><rect x="500" y="100" width="90" height="500" fill="#09F"></rect></svg>

</body></html>

运行这个代码,将会产生一个600像素宽的图形,内有90像素宽间隔为10的阶梯状柱形图。和很多面向对象的编程一样,这个规范也是一个标准流程,首先引用D3.js到网页中来,然后加个画布,画一些对象在上面,为对象设置属性,可能的话,更改对象属性产生交互效果。将其中关键的几个点说明如下:

.select/selectAll:从当前文档中选择元素

.data(dataset):此语法将数据集绑定到对象上

.enter():此语法将数据集输入对象并为Select到的集合添加缺失元素

.append("rect"):创建并添加新元素到选定元素后

.attr("width", 500):设置属性

简单了解了这些,那上面的代码用自然语言描述就是:

  • 在body对象上添加一个SVG对象,并设置它的宽和高;
  • 绑定数据并根据数组内容在SVG上添加矩形;
  • 为矩形设置横坐标;
  • 为矩形设置其他属性。

总体来讲,D3.js毕竟也是javascript的延伸,因此像顺序、分支和循环等JS语句规范它都是继承的,有关javascript的句法,查阅相关资料。

2015-02-11_132744

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: