图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 】 做一个简单的图表！的更多相关文章

  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. LNMP 基于域名的虚拟主机配置 （Centos5.6）

    . . server { listen ; #listen [::]: default_server ipv6only=on; server_name www.blog.com; index inde ...

  2. selenium 学习笔记 ---新手学习记录（6） 问题总结（java）

    1.查看网页的cookie信息 //查看cookie 登录后的cookie Set<Cookie> setcoke= driver.manage().getCookies(); for(C ...

  3. HTML5 appcache

    参考http://www.zation.me/2013/05/28/build_offline_mobile_web_app.html 他的事件总结的比较好 checking:客户端正在检查manif ...

  4. Android平台APK分析工具包androguard的部署使用和原理分析

    原创文章,转载请注明出处,谢谢. Android应用程序分析主要有静态分析和动态分析两种,常见的静态分析工具是Apktool.dex2jar以及jdgui.今天突然主要到Google code上有个叫 ...

  5. Failure [INSTALL_FAILED_OLDER_SDK]

    在AndroidManifest.xml 中把  <uses-sdk android:minSdkVersion="21" />的版本调节的低一点

  6. C++ 用libcurl库进行http 网络通讯编程

      一.LibCurl基本编程框架libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议.libcur ...

  7. POJ-1010 Stamps

    [题目描述] 题目大意是:邮票发行商会发行不同面值.不同种类的邮票给集邮爱好者,集邮爱好者有总目标面额,通过不同的邮票组合(总数在4张以内)达到该面值,卖给集邮爱好者.另外,发行商发行的邮票面值最多2 ...

  8. 令人作呕的OpenSSL

    在OpenSSL心脏出血之后,我相信非常多人都出了血,而且流了泪...网上瞬间出现了大量吐嘈OpenSSL的文章或段子,仿佛内心的窝火一瞬间被释放了出来,跟着这场疯闹,我也吐一下嘈,以雪这些年被Ope ...

  9. 2.4.5 用NPOI操作EXCEL－－插入图片

    我们知道,在Excel中是可以插入图片的.操作菜单是“插入->图片”,然后选择要插入图片,可以很容易地在Excel插入图片.同样,在NPOI中,利用代码也可以实现同样的效果.在NPOI中插入图片 ...

  10. floyed算法

    Floyed算法(实际是动态规划问题) 问题:权值矩阵matrix[i][j]表示i到j的距离,如果没有路径则为无穷 求出权值矩阵中任意两点间的最短距离 分析:对于每一对定点u,v看是否存在一个点w使 ...