【 D3.js 入门系列 — 3 】 做一个简单的图表!
图1. 柱形图
1. 柱形图
前几章的例子,都是对文字进行处理。本章中将用 D3 做一个简单的柱形图。制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 。
SVG ,即可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义图形,可在 W3School 学习 SVG 的相关语法,不需要记住所有标签,用的时候再查即可。
先看下面的代码:
- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
- <script>
- var width = 600;
- var height = 600;
- var svg = d3.select("body").append("svg")
- .attr("width",width)
- .attr("height",height);
- var dataset = [ 30 , 20 , 45 , 12 , 21 ];
- svg.selectAll("rect")
- .data(dataset)
- .enter()
- .append("rect")
- .attr("x",10)
- .attr("y",function(d,i){
- return i * 30;
- })
- .attr("width",function(d,i){
- return d * 10;
- })
- .attr("height",28)
- .attr("fill","red");
- </script>
结果如图1所示,代码的解说为:
第 3 – 4 行: 定义两个变量,代表 SVG 绘制框的宽和高。
第 5 – 7 行: 选择 <body> 后,在 <body> 里插入 <svg> ,用 attr 来给 <svg> 添加属性。用 attr 添加属性的效果类似于在 HTML 中 <a href=”….”></a> 给 a 添加属性 href 。
第 9 行: 要使用的数据。
第 11 行: 表示在 <svg> 中选择所有的 <rect> 元素,但是实际上这时候 <svg> 中还不存在 <rect> 元素。这是 D3 一个比较特殊的地方,即它能够选择一个空集。先不要惊讶,请看第 13 行。
第 12 行: 表示将数据绑定要这个 <svg> 上。
第 13 行: enter() 表示当所需要的元素( <rect> )比绑定的数据集合的元素( dataset )少时,自动添加位置,使得与数据集合的数量一样多。这里很重要,后面章节会详细说明。
第 14 行: 紧接上一行, 添加元素 <rect> 。11-14行经常一起出现,要注意,如不理解,可暂时不必深究。
第 15 – 27 行: 设定 <rect> 元素的各项属性,如位置,长短,颜色等。
2. 比例尺
上面的柱形图,对于每个柱形都是手动设定的长度,实际运用中我们常常希望给定一个最大值,让柱形自动根据这个最大值调整百分比,显示出来,怎么办呢?插入如下代码:
- var wx = d3.scale.linear()
- .domain([0,d3.max(dataset)])
- .range([0,500]);
d3.scale.linear() 用于生成一个线性函数的比例尺,它的初始定义域 domain 为 [ 0 , 1 ] ,初始值域 range 为 [ 0 , 1 ] , 这里的 [ ] 表示的是范围。 现在我们把 domain 设定为 [ 0 , d3.max(dataset) ] ,即0到 dataset 中的最大值。 range设定为0到500。 这表示如果数据是45,则返回500,如果是30,则返回333.333。
比例尺赋值给了 wx,要注意这里的 wx 是一个函数。目前暂不深究。
接下来只要在添加 <rect> 时给 width 属性赋值的时候换成变量 wx 即可。
- svg.selectAll("rect")
- .data(dataset)
- .enter()
- .append("rect")
- .attr("x",10)
- .attr("y",function(d,i){
- return i * 30;
- })
- .attr("width",wx) //注意这里
- .attr("height",28)
- .attr("fill","red");
这样,宽度会随着绑定的数据自动变化。
【 D3.js 入门系列 — 3 】 做一个简单的图表!的更多相关文章
- 【 D3.js 入门系列 --- 6 】 如何使移动图表
我的个人博客是: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. [5.1]节中制作了一个比較完好的图表.但它是静态的.想做出它的动 ...
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 9.1 】 生产饼图
我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout ...
随机推荐
- Select specified items from Tuple List
#Select specified items from Tuple List ##Select one item to form list `tupleList.Select(element =&g ...
- linux所有信息查询网址
- HDU 2717 Catch That Cow
简单的广搜: #include <cstdio> #include <queue> using namespace std; ],step[]; int n,start,end ...
- Eclipse RCP扩展
它跟普通的插件扩展点是一样的写法,你只需要看 eclipse 自带的源码,打开你的 eclipse 目录,插件 *.exsd 找到后在 eclipse 中查看这个文件夹对应的插件的源码,里面有 plu ...
- Kapit控件方法笔记
r.kapit.visualizer.renderers.DefaultItemRenderer //整个节点添加click处理函数对象类型 fr.kapit.visualizer.controls. ...
- JS,JQuery各种获取屏幕的宽度和高度
JQuery: $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).h ...
- ios7以上自定义导航栏标题的字体大小及颜色的方法
自定义导航栏的字体和颜色,只需要自定义一个lable,然后将lable添加到导航栏的titleview中就可以了 代码如下 UILabel *label = [[UILabel alloc] init ...
- Web性能优化方案
第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...
- poj 2515 Birthday Cake
/** 大意 : 求1^m + 2^m + 3^m + 4^m +....+ n^m 解题步骤: 先构造从0到m的第1阶差分序列,然后以下所有2---->p阶的差分表. 令C[n+1][1]=n ...
- IOS 隐藏键盘。
在View的UITextField中经常需要输入完文字后隐藏软键盘,要实现着一点要让View的Controller实现UITextFieldDelegate代理,然后编写相应的代码. #import ...