图1. 柱形图

1. 柱形图

前几章的例子，都是对文字进行处理。本章中将用 D3 做一个简单的柱形图。制作柱形图有很多种方法，比如用 HTML 的 <div> 标签，或在 SVG 上绘制 。

SVG ，即可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义图形，可在 W3School 学习 SVG 的相关语法，不需要记住所有标签，用的时候再查即可。

先看下面的代码：

  1. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  2. <script>
  3.         var width = 600;
  4.         var height = 600;
  5.         var svg = d3.select("body").append("svg")
  6.                        .attr("width",width)
  7.                        .attr("height",height);
  8.  
  9.         var dataset = [ 30 , 20 , 45 , 12 , 21 ];
  10.  
  11.         svg.selectAll("rect")
  12.            .data(dataset)
  13.            .enter()
  14.            .append("rect")
  15.            .attr("x",10)
  16.            .attr("y",function(d,i){
  17.                 return i * 30;
  18.            })
  19.            .attr("width",function(d,i){
  20.                 return d * 10;
  21.            })
  22.            .attr("height",28)
  23.            .attr("fill","red");
  24.  
  25. </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. 比例尺

上面的柱形图，对于每个柱形都是手动设定的长度，实际运用中我们常常希望给定一个最大值，让柱形自动根据这个最大值调整百分比，显示出来，怎么办呢？插入如下代码:

  1. var wx = d3.scale.linear()
  2.                 .domain([0,d3.max(dataset)])
  3.                 .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 即可。

  1. svg.selectAll("rect")
  2.            .data(dataset)
  3.            .enter()
  4.            .append("rect")
  5.            .attr("x",10)
  6.            .attr("y",function(d,i){
  7.                 return i * 30;
  8.            })
  9.            .attr("width",wx)           //注意这里
  10.            .attr("height",28)
  11.            .attr("fill","red");

这样，宽度会随着绑定的数据自动变化。

【 D3.js 入门系列 — 3 】 做一个简单的图表！的更多相关文章

  1. 【 D3.js 入门系列 --- 6 】 如何使移动图表

    我的个人博客是: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. [5.1]节中制作了一个比較完好的图表.但它是静态的.想做出它的动 ...

  2. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  3. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  4. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  5. 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

    前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...

  6. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  7. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

  8. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  9. 【 D3.js 入门系列 --- 9.1 】 生产饼图

    我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout ...

随机推荐

  1. php生成数据字典,代码

    <?php /** * 生成mysql数据字典 */ header("Content-type:text/html;charset=utf-8"); // 配置数据库 $da ...

  2. shell学习-读取输入

    功能:读取输入,打印:如果长度小于MINLEN,那么输出空格. #!/bin/bash # paragraph-space.sh # Insert a blank line between parag ...

  3. 如何禁止scrollView 的子控件自动滑到 底部或者中间部分

    现象:当一个scrollView 里面包含很多childView,并且整个界面超出屏幕的范围,而且每个childView都获取焦点,scrollView就会自动滑到底部或者中间部分. 可以使用以下几种 ...

  4. web.xml中servlet, bean, filter, listenr 加载顺序汇总

    最终得出结果:先 listener >> filter >> servlet >> spring 所以,如果过滤器中要使用到 bean,可以将spring 的加载 ...

  5. express文件上传

    安装express,创建项目,添加sqlite3模块 express --sessions --css stylus --ejs myhotel npm install sqlite3node app ...

  6. D3DXMatrixMultiply 函数

    D3DXMatrixMultiply 函数 两个矩阵相乘. 定义:D3DXMATRIX *WINAPI D3DXMatrixMultiply(           D3DXMATRIX *pOut,  ...

  7. Java之JDOM生成XML和解析

    一.生成XML文件 1.JDOM是对Java原始的类进行了封装.让解析XML文件变得很方便 2.创建一个XML文件的根节点: Element root = new Element("HD&q ...

  8. iOS推送介绍

    iOS消息推送的工作机制可以简单的用下图来概括: Provider是指某个iPhone软件的Push服务器,APNS是Apple Push Notification Service的缩写,是苹果的服务 ...

  9. 关于Ubuntu远程ssh连接失败的问题

    在做机器人项目的时候,用的是Ubuntu的linux,跟之前的CentOS的操作命令有一点差别,就比如防火墙的名字,在Ubuntu系统中叫什么ufw,真是有点不好接受. 为了能模拟环境,我又弄了一台电 ...

  10. JSP内置对象---application

    application 对象   服务器启动后,就产生了application 对象.当一个客户访问服务器上的一个JSP 页面时,JSP 引擎为该客户分配这个application 对象,  当客户在 ...