【D3.js数据可视化系列教程】--(五)用层画条形图
来源:互联网 发布:唯品会美工的岗位职责 编辑:程序博客网 时间:2024/04/29 06:18
1 代码解释
1.1 为同类层添加样式
div.bar { display: inline-block; width: 20px; background-color: teal;}
1.2 声明要为某类层设置属性
.attr("class", "bar")
1.3 为每个特定的层设置属性
.style("height", function(d) { return (d * 5) + "px";});
1.4 设置层之间的间隔
margin-right: 2px;
2 源码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>testD3-3-drawingDivBar</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script><style type="text/css">div.bar { display: inline-block; width: 20px; margin-right: 2px; background-color: teal;}</style></head><body><script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) { return (d * 5) + "px"; });</script></body></html>
3 效果
- 【D3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.V3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.js数据可视化系列教程】--(十)更自由的条形图
- 【D3.js数据可视化系列教程】(二十)--交互图表之条形图排序
- 【D3.js数据可视化系列教程】(二十一)--交互图表之条形图排序切换
- 【D3.V3.js数据可视化系列教程】--(十)更自由的条形图
- 【D3.js数据可视化系列教程】(三十四)-- sankey图
- 【D3.js数据可视化系列教程】(三十六)-- 冰柱图
- 【D3.js数据可视化系列教程】--(三)数据绑定
- 【D3.js数据可视化系列教程】--(四)使用数据
- 【D3.JS数据可视化实战记录】绘制条形图
- 【D3.js数据可视化系列教程】--(一)简介
- 【D3.js数据可视化系列教程】--(六)生成测试数据
- 【D3.js数据可视化系列教程】--(七)SVG初探
- 【D3.js数据可视化系列教程】--(十一)散点图
- 【D3.js数据可视化系列教程】--(十二)比例尺
- 【D3.js数据可视化系列教程】--(十三)坐标轴
- 【D3.js数据可视化系列教程】(二十八)--弦图
- Eclipse快捷键 10个最有用的快捷键
- The JRE could not be found. Edit the server and change the JRE location.
- Exercises 4.1 E2
- 大数据时代的数学思维(3)-初等代数-python计算
- android隐藏以及显示软键盘以及不自动弹出键盘的方法
- 【D3.js数据可视化系列教程】--(五)用层画条形图
- Eclipse常用快捷键的使用(二)
- 迁移学习心得,从OpenStack到QEMU
- poj 2112 Optimal Milking 网络流 最大流
- android中<include />标签的用法
- C/C++程序员应聘常见面试题剖析
- 如何管理时间(李开复)
- random模块
- Linux下更改目录及其下的子目录和文件的访问权限