「数据可视化库王者」D3.js 极速上手到Vue应用

前言
D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:

D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。
它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。
我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。

根据广泛定义，D3可拆分为以下几种分库：

绝大部分的D3课程或书籍，都会着重讲解在其DOM操作功能上，但这明显与近几年来的web框架理念相违背。
用于数据可视化的D3，其核心在于使用绘图指令装饰数据，从源数据创建新的可绘制数据，生成SVG路径以及从数据和方法在DOM中创建数据可视化元素（如轴）的功能。

有许多用于管理DOM的工具，所有这些工具都可以在D3中集成数据可视化功能。这也是D3能与Vue无缝结合的原因之一。
于此，我们不需要从D3 DOM操作功能开始学起，直接通过实例来入门D3。

1. D3.js 渐进入门
   以下实例的模版均为以下形式：

First heading

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="index.js"></script>
</body>

复制代码 1. 选择和操作

你需要学习的第一件事是如何使用D3.js选择和操作DOM元素。该库在操作DOM方面实际上非常强大，因此理论上可以将其用作jQuery的替代品。以下代码请逐行添加运行。

// index.js
d3.select();
d3.selectAll();

d3.select(‘h1’).style(‘color’, ‘red’)
.attr(‘class’, ‘heading’)
.text(‘Updated h1 tag’);

d3.select(‘body’).append(‘p’).text(‘First Paragraph’);
d3.select(‘body’).append(‘p’).text(‘Second Paragraph’);
d3.select(‘body’).append(‘p’).text(‘Third Paragraph’);

d3.selectAll(‘p’).style(’’)
复制代码
2.数据加载和绑定

当你要创建可视化时，了解如何加载数据以及将其绑定到DOM非常重要。所以在这个实例中，你将学到这两点。
let dataset = [1, 2, 3, 4, 5];

d3.select(‘body’)
.selectAll(‘p’)
.data(dataset)
.enter()
.append(‘p’) // appends paragraph for each data element
.text(‘D3 is awesome!!’);
//.text(function(d) { return d; });
复制代码
3.创建一个简单的柱状图

首先需要添加一个svg标签

Bar Chart using D3.js

复制代码
然后在index.js中添加（已添加关键注释）：

// 数据集
let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
// 定义svg图形宽高，以及柱状图间距
let svgWidth = 500, svgHeight = 300, barPadding = 5;
// 通过图形计算每个柱状宽度
let barWidth = (svgWidth / dataset.length);

// 绘制图形
let svg = d3.select(‘svg’)
.attr(“width”, svgWidth)
.attr(“height”, svgHeight);

// rect，长方形
// 文档：http://www.w3school.com.cn/svg/svg_rect.asp

let barChart = svg.selectAll(“rect”)
.data(dataset) //绑定数组
.enter() // 指定选择集的enter部分
.append(“rect”) // 添加足够数量的矩形
.attr(“y”, d => svgHeight - d ) // d为数据集每一项的值, 取y坐标
.attr(“heig