D3.js系列 --- 初识

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参考文档