D3.js 做一个简单的图表!

柱形图是一种最简单的可视化图标,主要有矩形、文字标签、坐标轴组成。本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图。

一、 画布是什么

  前几章的处理对象都是 HTML 的文字,没有涉及图形的制作。

  要绘图,首要需要的是一块绘图的“画布”。

  HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。 

  1.1. SVG 是什么

    SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。

    SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML 中显示。

    SVG 有如下特点:

      • SVG 绘制的是矢量图,因此对图像进行放大不会失真。
      • 基于 XML,可以为每个元素添加 JavaScript 事件处理器。
      • 每个图形均视为对象,更改对象的属性,图形也会改变。
      • 不适合游戏应用。

  1.2. Canvas 是什么

    Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素。

    Canvas 有如下特点:

      • 绘制的是位图,图像放大后会失真。
      • 不支持事件处理器。
      • 能够以 .png 或 .jpg 格式保存图像
      • 适合游戏应用

二、添加画布

  D3 虽然没有明文规定一定要在 SVG 中绘图,但是 D3 提供了众多的 SVG 图形的生成器,它们都是只支持 SVG 的。因此,建议使用 SVG 画布

  使用 D3 在 body 元素中添加 svg 的代码如下。

var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

   有了画布,接下来就可以在画布上作图了。

三、绘制矩形

  绘制一个横向的柱形图。只绘制矩形,不绘制文字和坐标轴。

  在 SVG 中,矩形的元素标签是 rect。例如:

<svg>
<rect></rect>
<rect></rect>
</svg>

  上面的 rect 里没有矩形的属性。矩形的属性,常用的有四个:

    • x:矩形左上角的 x 坐标
    • y:矩形左上角的 y 坐标
    • width:矩形的宽度
    • height:矩形的高度

  要注意,在 SVG 中,x 轴的正方向是水平向右,y 轴的正方向是垂直向下的。

  现在给出一组数据,要对此进行可视化。数据如下:

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据(表示矩形的宽度)

  为简单起见,我们直接用数值的大小来表示矩形的像素宽度(后面会说到这不是一种好方法)。然后,添加以下代码。

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

  这段代码添加了与 dataset 数组的长度相同数量的矩形,所使用的语句是:

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

  这段代码以后会常常出现在 D3 的代码中,请务必牢记。目前不深入讨论它的作用机制是怎样的,只需要读者牢记,当

  有数据,而没有足够图形元素的时候,使用此方法可以添加足够的元素。

  添加了元素之后,就需要分别给各元素的属性赋值。在这里用到了 function(d, i),前面已经讲过,d 代表与当前元素绑定的数据,i 代表索引号。给属性赋值的时候,是需要用到被绑定的数据,以及索引号的。

  最后一行的:

.attr("fill","steelblue");

  是给矩形元素设置颜色。一般来说,最好写成外置 CSS 的形式,方便归类和修改。

时间: 2024-10-25 01:53:46

D3.js 做一个简单的图表!的相关文章

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

【 D3.js 入门系列 — 3 】 做一个简单的图表!

图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 . SVG ,即可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义图形,可在 W3School 学习 SVG 的相关语法,不需要记住所有标签,用的时候再查即可. 先看下面的代码: <script src="http://d3js.org/d3.v3.mi

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

原生js做一个简单的进度条

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素. 主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止 效果如下: 一 css如下: *{ margin: 0; padding: 0; } #box{ width: 500px; height: 30px; margin: 50px auto; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 15px;

css3加js做一个简单的3D行星运转效果

前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处理的不是很好,如果有好的建议万望留言告知,不胜感谢.源代码已上传到github上,点这里获取.好了不说废话了,下面附上代码. HTML部分 <div class="path-Saturn"> <div id="Saturn" title="土

用js做一个简单的留言板效果

html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>js实现简单留言板</title> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <link rel="stylesheet&quo

JS做一个四则运算计算器

用JS做一个简单的网页计算器如上图所示,只进行简单的加减乘除运算 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>计数器</title></head><body>    <input type="text" name="text"

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

使用React并做一个简单的to-do-list

1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其visual-dom的这种技术创新,也算是早就有了初步了解.一来没有学的太深入,二来后来在工作中和业余项目中都没有用到,因此慢慢的就更加生疏了. 近期,因为我想把自己的开源项目wangEditor能放在React.angular和vuejs中使用.先从react开始,顺手自己也重试一下React的基础知识,顺便再做一个小d