图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 451E. Devu and Flowers 容斥原理+lucas

    题目链接 给n个盒子, 每个盒子里面有f[i]个小球, 然后一共可以取sum个小球.问有多少种取法, 同一个盒子里的小球相同, 不同盒子的不同. 首先我们知道, n个盒子放sum个小球的方式一共有C( ...

  2. Android系统设置— android.provider.Settings

    android.provider.Settings Intent intent = new Intent(android.provider.Settings.ACTION_SETTINGS); sta ...

  3. 移动服务和 Azure Active Directory 中基于角色的访问控制

    编辑人员注释:本文章由 Matthew Henderson撰写 去年 11月,我们发布了 Azure Active Directory (AAD) 预览版作为移动服务身份提供程序.此举旨在为企业开 ...

  4. GTW likes math（简单数学）

    GTW likes math  Accepts: 472  Submissions: 2140  Time Limit: 2000/1000 MS (Java/Others)  Memory Limi ...

  5. XML和DTD的简单介绍和入门

    XML(Extensible Markup Lanaguage),可扩展标记语言,是标准通用标记语言(Standard Generalized Markup Language, SGML)的一个子集, ...

  6. 3.5 用NPOI操作EXCEL－－巧妙使用Excel Chart

    在NPOI中,本身并不支持Chart等高级对象的创建,但通过l模板的方式可以巧妙地利用Excel强大的透视和图表功能,请看以下例子. 首先建立模板文件,定义两列以及指向此区域的名称“sales”: 创 ...

  7. 你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

    http://www.webhek.com/misc/css-loaders

  8. WPF qq界面(转)

    原文:http://blog.csdn.net/u013981858/article/details/49130885 刚开始学WPF,自己写了个小东西,说实话写的并不好,好多东西不懂只是用现在懂的东 ...

  9. codeforces 559A(Gerald's Hexagon)

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u   Description Gera ...

  10. C++基础梳理--Class、Struct、Union

    C++学习一段时间后,反过头来看我发现我忘了一下最基础的东西:strcut(结构体),union(联合体)我学会了类的一堆东西却忘了这两个最基础的: 现在就好好的重新学习一下这里的东西: 一.Clas ...