D3.js系列 --- 初识

Posted 2020-12-25 levinhax

D3.js(Data-Driven Documents)即被数据驱动的文档,它是一个用于根据数据来操作文档的javascript库。相比于echart, antv等其他图表库，它算是一个比较底层的数据可视化工具。它不提供任何一种现成的图表，只做最基础的东西，所有的图表都需要我们在它的库里挑选合适的方法进行构建。在一切即数据的今天，我们更需要做到让数据活起来，展现数据之美。

简介

犹抱琵琶半遮面，千呼万唤中终于要接触数据可视化了。数据可视化越来越流行，让复杂的数据和文字变得十分容易理解。作为其中的佼佼者，当然要先侃一下我们的D3了。

D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助html，SVG和CSS来生动地可视化各种数据。一句话，D3根据现有的web标准，将强大的可视化，动态交互和数据驱动的DOM操作方法完美结合，进而来制作炫目的可视化效果。

比较一下D3和JQuery

同是操作DOM的，就少不了被拿出来比较一下:

• D3是数据驱动的，JQuery不是：我们使用JQuery选择器$()直接操纵元素；D3通过专有的datum(),data()，enter()和exit()方法提供数据和回调，然后操作元素
• D3用来做数据可视化，jQuery用来创建web应用

使用

在这里下载最新的版本(5.5.0)：

• d3

直接链接到最新版本：

<script src="https://d3js.org/d3.v5.min.js"></script>

NPM：

npm install d3

Yarn:

yarn add d3

浏览器支持情况

D3支持的主流浏览器不包括IE8及以前的版本。D3在Chrome、Firefox、Safari、Opera和IE9上都能正常使用。D3的大部分组件可以在旧的浏览器运行。

简单示例（实现一个简单的图表）

柱形图简明、醒目，是一种简单常用的图表，主要构成部分有矩形、坐标轴和文字说明。这个例子只绘制矩形的部分。

假设给了我们一组数据，[30, 86, 168, 281, 303, 365],根据图片我们可以直观的看出这些数据的关系

下面就让我们一步一步的去实现它。

选择集

在jQuery中我们使用选择器$()去选择元素，在d3中我们引入一个新的名词叫做选择集。使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。

• d3.select() - 从当前文档中选择一个元素
• d3.selectAll() - 从当前文档中选择多个元素
• selection.style() - 取得或设置样式属性

D3中我们可以像jQuery一样使用链式语法

d3.select()
  .selectAll()
  .style(‘color‘, ‘red‘);

数据绑定

D3中我们可以把数据绑定到DOM上，它可以通过函数来实现：

• selection.datum() - 取得或设置单个元素的数据
• selection.data() - 取得或设置一组元素的数据

以下是一个使用说明:

var dataset = [‘Beijing‘, ‘Shanghai‘, ‘Tianjin‘, ‘Chongqing‘];
var p = body.selectAll(‘p‘);
p.data(dataset)
.text(function(d, i) {
  return d;
});

这样就把数据绑定到了p标签上，函数function(d, i){}包含两个参数，d代表数据，这里就是与元素绑定的数据；i代表索引，从0开始

画布

要绘图，首先需要的是一块"画布"。HTML5中提供了两种强有力的"画布": SVG和Canvas。这里不多做解释。

D3提供了众多的SVG图形的生成器，我们在SVG画布中实现它。

添加画布如下:

let svg = d3.select(‘body‘)  //选择文档中的body元素
  .append(‘svg‘);     //添加一个svg元素
  

绘制矩形

绘制矩形之前我们的SVG元素里面还没有rect元素，我们就需要自己为它添加补全，需要链式使用selection.enter()和selection.append()来实现。

svg.selectAll("rect")
  .data(data)  // 绑定数据
  .enter()      // 为缺失的元素返回占位符
  .append("rect")    // 添加足够数量的矩形元素
  .attr("x",20 + ‘px‘)     //设置矩形的x轴和y轴位置
  .attr("y",function(d,i){
    return i * 28 + ‘px‘;
  })
  .style("width",function(d){  // 设置矩形的宽高
    return d + ‘px‘;
  })
  .style("height",26 + ‘px‘)
  .text(function(d) {
    return d;
  })
  

一个简单的柱形图就成功了，实现效果如下图

• SVG参考文档
• Canvas参考文档