图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. codeforces 622E. Ants in Leaves

    题目链接 给一棵有根树, 每个叶子节点上有一只蚂蚁. 在0时刻蚂蚁开始向上爬, 同一时刻, 除了根节点以外, 一个节点上面不能有2个蚂蚁. 问所有的蚂蚁都爬到根节点需要的最短时间. 因为除了根节点, ...

  2. grunt切换下载源

    nrm 是一个 NPM 源管理器,允许你快速地在NPM 源间切换: 安装:npm install -g nrm 列出可选源:nrm ls 切换:nrm use taobao 测试所有源连接时间:nrm ...

  3. Codecs是以plugin的形式被调用的（显示中文的codec plugin文件是qcncodecs4.dll），可静态载入和动态载入

    作为非英语国家人员开发的类库,QT有充分的理由优先考虑支持Unicode和各国自定义字库编码.大家也知道了QT对软件Internationalization有一套完整的开发模型,包括专门为此写的lin ...

  4. <Win32_16>来看看标准菜单和右键菜单的玩法

    日常应用中,菜单主要分为两种:(1) 标准菜单(处于应用程序菜单栏处的菜单)    (2)右键快捷菜单 几乎你所见过或使用过的软件中,都有它俩儿 为应用程序添加它们的基本步骤: (1)用代码或者IDE ...

  5. 对于java用发送http请求，请求内容为xml格式

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.ByteArrayOutputStr ...

  6. android中使用jni对字符串加解密实现分析

    android中使用jni对字符串加解密实现分析 近期项目有个需求.就是要对用户的敏感信息进行加密处理,比方用户的账户password,手机号等私密信息.在java中,就对字符串的加解密我们能够使用A ...

  7. Enze Third day(c#中选择结构【if...else】)

    哈喽,又到了我总结课堂知识的时间了.今天在云和学院学的是C#中的“选择结构”下的If语句.下面就来总结一下今天所学的吧. 理论:If语句是最常用的选择结构语句.它主要根据所给定的条件(常由关系表达式和 ...

  8. 比赛F-F Perpetuum Mobile

    比赛F-F     Perpetuum Mobile 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=86640#problem/ ...

  9. linux命令: patch

    一. 针对单文件的patch: 我们以mkprj.sh.1和mkprj.sh两个文件为例: [root@localhost tst]# lsmkprj.sh.1  mkprj.sh 看两个文件的差异: ...

  10. Java map取value最大值和最小值

    /** * 求Map<K,V>中Value(值)的最小值 * * @param map * @return */ public static Object getMinValue(Map& ...