D3.js制作图表

D3是用于数据可视化的Javascript库。使用SVGCanvasHTML。结合强大的可视化技术和数据驱动的DOM操作方法。

D3与JQuery的区别

  • D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素;但是使用D3时我们需要通过D3专有的data()enter()exit()方法提供数据和回调,然后D3操作元素。
  • D3通常用于数据可视化;JQuery用于创建Web应用。D3有很多数据可视化扩展;JQuery有很多Web应用插件。
  • 两者都是Javascript DOM操作库,提供CSS选择器和流畅的API。

What is the difference between D3 and JQuery?

最常用的方法

  • d3.select(selector):选择第一个匹配selector的元素。如果没有匹配的元素,返回一个空的选择(但不是nullundefined)。

  • d3.selectAll(selector):与select()不同的是,会选择所有匹配的元素。

  • selection.append(type):如果指定的type是一个字符串,则将这个type(标签名称)作为新元素附加到每个选定元素的最后一个子元素。

  • selection.attr(name, [value])value确定时,将selection中名为name的属性值设置成valuevalue可以为常量或者方法。如果value没有给出,返回selection中第一个非空元素的name属性当前值。

  • selection.data([data[,key]]):将数据和元素绑定起来,并返回一个新的selection

  • selection.enter():返回enter selection。此时DOM元素少于对应的数据。用于添加缺少的DOM元素。比如:

      var div = d3.select("body")
        .selectAll("div")
        .data([4, 8, 15, 16, 23, 42])
        .enter().append("div")
        .text(function(d) { return d; });
    

    如果body是空的,上面的代码就会根据数据创建新的div元素,然后添加到body元素中,并将文本内容设置为对应的数字。页面结果如下:

      <div>4</div>
      <div>8</div>
      <div>15</div>
      <div>16</div>
      <div>23</div>
      <div>42</div>
    
  • selection.exit():返回exit selection。此时DOM元素多于对应的数据。用于移除多余的DOM元素。比如,基于上面的例子,我们要更新数据:

      div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; });
    

    因为此时指定了key方法(用于指定数据和元素匹配的顺序等),并且数据[4,8,16]匹配已经存在的元素,所以update selection只包含3个div元素。我们可以使用enter selection添加3个新元素:

      div.enter().append("div").text(function(d) { return d; });
    

    然后,还需要移除不需要的元素[15, 23, 42]:

      div.exit().remove();
    

    页面结果:

      <div>1</div>
      <div>2</div>
      <div>4</div>
      <div>8</div>
      <div>16</div>
      <div>32</div>
    

制作柱状图

柱状图示例

使用D3的时候,要对SVG的结构有一个了解。要绘出什么图形,需要用到什么标签,标签需要定义什么属性。
比如,制作一个柱状图,主要是XY坐标轴和柱形。XY轴用到line标签绘制直线,以及text标签显示刻度的文字。柱形用到rect标签绘制长方形,那如果要带圆角的长方形,我们可以设置rect标签的rxry属性,如果要定义长方形的位置,需要设置xy属性等。就这样,一部分一部分的组合到一起成为一张图。

以下的内容是基于D3 3.x 的API,有些接口跟D3 4.0是不同的。
D3 3.x API Reference
D3 4.0 API Reference

根部的svg
D3绘图首先要创建一个svg元素并定义宽高等属性:

var svg = d3.select(id).append("svg")
    .attr('class', 'svg_timeline')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);  

坐标轴
制作坐标轴首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ,设置坐标轴的比例尺,或者返回当前的比例尺。比例尺分为:

  • 定量比例尺:连续的数据,比如数字。
  • 时间比例尺:数据是时间。
  • 序数比例尺:离散的数据,比如名称,类别等。

比如我们要制作一个有时间刻度的X轴和一个数字刻度的Y轴,就可以使用时间比例尺和定量比例尺,或者更具体的说,线性比例尺。

  • d3.scale.linear():创建一个线性比例尺。
  • d3.time.scale():创建一个时间比例尺。刻度和刻度格式配置为本地时间。

确定比例尺之后还需要设置输入域和输出范围。比如一个x轴的比例尺为:

var x = d3.time.scale()
    .range([0, 坐标轴的宽度])
    .domain(最小日期, 最大日期);

最小日期和最大日期都是Date对象。然后设置X坐标轴的比例尺并创建它:

//生成x坐标轴
var xAxis = d3.svg.axis()       //新建一个默认的坐标轴
    .scale(x)       //设置比例尺
    .ticks(d3.time.day, 1)      //指定刻度生成的方式
    .tickFormat(function(d){    //自定义刻度文字格式
        var month = d.getMonth() + 1;
        return month+'月'+ d.getDate() +'日';
    })
    .tickPadding([15])  //坐标轴线与文字之间的距离
    .tickSize(-height)
    .orient("bottom");  //位置

ticks的参数类型取决于对应的比例尺的类型,这里传的参数是时间间隔,也就是说刻度与刻度之间是相隔一天的。
tickFormat则让我们可以自定义刻度的文字格式。

值得一说的是,如果数据中对应X轴的数据是字符串,比如‘2017-08-12’。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

  • format.parse(string):把一个字符串string解析为一个日期。
  • d3.time.format(specifier):根据给定的specifier创建一个当地时间格式化。

比如:

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后,在svg元素中添加坐标轴:

//添加X轴元素
svg.append("g")
    .attr("class", "axis x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次,并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤:将数据跟页面元素绑定,并创建所需要的页面元素,具体设置每个页面元素的样式位置,以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
    .data(ddata)    //绑定数据
    .enter().append("g")    //创建缺少的页面元素
    .attr('class', 'barRect')
    .attr("id", function(d, i) {
        return "barRect-" + i;
    });                    

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
    .attr('class','bar-rect')
    .attr("width",16)   //长方形的宽度
    .attr("y", function(d) {
        return y(d.value);      //使用比例尺确定坐标Y值
    })
    .attr("x", function(d) {
        return x(d.date) - 8;   //使用比例尺确定坐标X值
    })
    .attr("height", function(d) {   //条形的高度
        return height - y(d.value);
    })
    .attr('rx',10)  //圆角
    .attr('ry',10)  //圆角
    .attr('fill','url(#linear-gradient)');  //填充渐变色

推荐阅读更多精彩内容

  • 这里讲一下怎么样用d3.js,输入一个数据list,根据数据画一个带有坐标轴的简单直方图.以下是目标效果. 直方图...
    Kaidi_G阅读 3,949评论 1 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,169评论 1 91
  • 对集合的操作 关于d3.attr 一个可以处理很多情况的函数,当只传入一个参数时,如果是string,则返回该属性...
    陈坚生阅读 1,845评论 0 3
  • 本教程是一个简单的入门教程,能够帮助初学者快速掌握D3的基础知识。 本节内容介绍了添加元素、绑定数据、使用数据、矢...
    笨笨的笨小孩阅读 1,268评论 0 1
  • 《动物凶猛》这篇文章总体来说是作者编造出来的,但是也有真实的故事。那时大概是改革开发的年代了吧,我猜,故事里面出现...
    笨小孩__阅读 10,937评论 1 3