图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. CSS Select 标签取选中文本值

    $("#userDep").find("option:selected").text()

  2. @Transactional失效的问题

    spring事物配置一般没有问题, 优先检查mysql的引擎是否是innodb, 是的话检查包的扫描是否有问题. 我就是因为包的扫描导致@Transactional失效. 具体情况如下, 在sprin ...

  3. fiddler---使用方法1--抓取手机app包

    1.首先fiddler设置

  4. ios如何实现推送通知

    推送通知的步骤:1.询问是否允许推送通知.2.如果用户允许在APPDELEGATE 中实现 - (void)application:(UIApplication *)application didRe ...

  5. 高质量程序设计指南C/C++语言——C++/C程序设计入门（4）

    *switch结构的break语句只是一个“jmp”指令,其作用就是跳到switch结构的结尾处 *标准C++/C语言提供3种循环:do/while.while和for,它们都在条件表达式为TRUE( ...

  6. 【Kill】两条Linux命令彻底杀死Oracle

    今天编写的两条极具杀伤力的命令,它可以瞬间将Oracle杀死在无形之中.后面我将给出简单注释并展示一下它的威力.$ ps -ef |grep $ORACLE_SID|grep -v grep|awk ...

  7. android天气查询（一）websevice之ksoap2软件包的使用

    对于用到天气信息,首先我想: 第一:数据不可能是我测得的,必须是网上的信息. 第二:网上的信息分为好多种,具体哪种比较好一点,这里我总结了两种. 第三:数据JSON怎么解析. 第四:如何提出数据与显示 ...

  8. Android开源项目（一）

    Android开源项目(一) GitHub在中国的火爆程度无需多~~,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则~~~~了解当下比较流行的Android与iOS开源项 ...

  9. Sicily-1443

    一．      题意: 模拟队列的操作,按优先级pop.如果有元素pop,则其他在队列里面的元素的时间都要加1.如果队头的元素因为优先级不够高而要push回队列的时候,所有元素的时间都不用改变. 二． ...

  10. js获取来源和当前域名

    参考:http://www.cnblogs.com/zuosong160522/p/5755615.html http://www.oicqzone.com/pc/2014113020362.html