【D3.js数据可视化系列教程】--(十)更自由的条形图
2013-09-08 11:42
751 查看
1. 准备数据
绘制条形图的输入数只需要一个表示每个条数据量的数组就行。var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
2. 创建SVG元素
var w = 500; var h = 100; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h);
3. 绘制矩形条
这里会使用D3经典的select-data-enter-append-attr/style的编程套路。也就是选择元素-绑定数据-添加新元素的占位符-添加元素-设置属性或样式。
这一组操作符是D3最常用的,大家一定要熟记以后几乎每个图都会用。这套路以后会单独介绍,这里只进行简要的注释。
svg.selectAll("rect") // 选择一组数据,这个时候还没有元素 .data(dataset) // 加载数据集 .enter() // 给新增数据添加占位符,表示将要添加一个元素 .append("rect") //添加矩形元素 // 这里属性的设置后面单说
4. 矩形条的属性和样式
我们绘制的思路是:条宽条宽 = 条实际宽度 + 间隙的宽度。其中条宽 = (w / dataset.length)间隙的宽度 = barPadding条高
条高 = 条长-纵坐标(纵坐标是从上到下计算,即下方向为正) 即条高 = h - (d * 4)条的颜色
条的颜色用据数据集生成的动态RGB值填充。所以结合上面分析结果就是:
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return i * (w / dataset.length); }) .attr("y", function(d) { return h - (d * 4); }) .attr("width", w / dataset.length - barPadding) .attr("height", function(d) { return d * 4; }) .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; });这里司机多说一句:
.attr("x", function(d, i) { return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; })很多初学者看不懂这里的
.attr("x", function(d, i),其实看前面的文章大家应该知道,x属性代表矩形的起点位置。这个匿名函数的入参两个d和i,分别代表当前元素绑定的数据值,当前元素的索引(第几个元素)。d和i的名字可以换成其他单词。
5. 文本标记(可是数值)
同理,添加文本并指定文本的XY坐标,其中:x坐标:i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; y坐标:h - (d * 4) + 14;svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) { return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; }).attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
6. 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-8-drawBar.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//SVG高宽
var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//创建SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return i * (w / dataset.length); }) .attr("y", function(d) { return h - (d * 4); }) .attr("width", w / dataset.length - barPadding) .attr("height", function(d) { return d * 4; }) .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; });
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) { return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; }).attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
</script>
</body>
</html>
7. 效果
相关文章推荐
- 【D3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.js数据可视化系列教程】(二十一)--交互图表之条形图排序切换
- 【D3.V3.js数据可视化系列教程】--(十)更自由的条形图
- 【D3.js数据可视化系列教程】(二十)--交互图表之条形图排序
- 【D3.js数据可视化系列教程】(三十一)-- 力导向图之分子式
- 【D3.js数据可视化系列教程】(三十五)-- 矩形树
- 【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示
- 【D3.js数据可视化系列教程】--(七)SVG初探
- 【D3.js数据可视化系列教程】--(八)使用D3绘制SVG
- 【D3.js数据可视化系列教程】(十九)--交互图表之鼠标悬停
- 【D3.js数据可视化系列教程】--(四)使用数据
- 【D3.js数据可视化系列教程】--(九)D3的数据类型
- 【D3.js数据可视化系列教程】--(十二)比例尺
- 【D3.js数据可视化系列教程】(二十九)--折叠树
- 【D3.V3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.js数据可视化系列教程】--(六)生成测试数据
- 【D3.js数据可视化系列教程】--(十三)坐标轴
- 【D3.js数据可视化系列教程】(十六)--更新、过度和动画
- 【D3.js数据可视化系列教程】(二十五)--加载csv文件
- 【D3.js数据可视化系列教程】(二十七)--径向树