D3 在 2011 发布的时候，可谓是一项极大的创新。那时候还是 jQuery 和 Backbone 的天下，浏览器也只是实现了一些简单的 css 标准如 “transitions” 等，像现在更为复杂的 ”flex” 布局还遥遥无期。D3 通过数据驱动来绘制图形的方式解决了这方面的难题，迅速笼络人心。
然而时代终究还是变了。现在的框架采用了虚拟 DOM 等更为灵活和强大的设计理念，CSS 在布局和动画方面也游刃有余。
让我再多给你举几个例子。
D3的学习曲线
过去几年我一直在使用 D3，并用它绘制了各种各样的图形曲线。然而一个问题就是，虽然我理解关于 D3 的基本概念，但我还是难以做到轻车熟路，我身边的同事跟我也是同样的感受。和大多数人一样，许多时候，我们都是从网上找到一个示例，然后将它修改为实际工程中所需要的。
如果我们想要添加一些新奇的功能，就需要不停的搜索，不停的尝试，不停的修改，直到它看起来是我们想要的了。
听起来是不是很熟悉？现在的开发者们已经非常熟悉虚拟 DOM 和模板编程。掌握这么一个设计理念与思考方式与现在其他库大相径庭的技巧，看起来并没什么卵用。
绘制曲线，它实际上并不难
如果让你自己从头写一个图表的话，你大概会感到不安和紧张，就好像自己要面临一个非常复杂的问题，但当你开始写的时候一切都变得简单起来。我们先来看一下如何使用 D3 画一副折线图：
1// set the dimensions and margins of the graph
2var margin = {top: 20, right: 20, bottom: 30, left: 50},
3 width = 960 - margin.left - margin.right,
4 height = 500 - margin.top - margin.bottom;
5// parse the date / time
6var parseTime = d3.timeParse("%d-%b-%y");
7// set the ranges
8var x = d3.scaleTime().range([0, width]);
9var y = d3.scaleLinear().range([height, 0]);
10// define the line
11var valueline = d3.line()
12 .x(function(d) { return x(d.date); })
13 .y(function(d) { return y(d.close); });
14// append the svg obgect to the body of the page
15// appends a 'group' element to 'svg'
16// moves the 'group' element to the top left margin
17var svg = d3.select("body").append("svg")
18 .attr("width", width + margin.left + margin.right)
19 .attr("height", height + margin.top + margin.bottom)
20 .append("g")
21 .attr("transform",
22 "translate(" + margin.left + "," + margin.top + ")");
23// Get the data
24d3.csv("data.csv", function(error, data) {
25 if (error) throw error;
26// format the data
27 data.forEach(function(d) {
28 d.date = parseTime(d.date);
29 d.close = +d.close;
30 });
31// Scale the range of the data
32 x.domain(d3.extent(data, function(d) { return d.date; }));
33 y.domain([0, d3.max(data, function(d) { return d.close; })]);
34// Add the valueline path.
35 svg.append("path")
36 .data([data])
37 .attr("class", "line")
38 .attr("d", valueline);
39// Add the X Axis
40 svg.append("g")
41 .attr("transform", "translate(0," + height + ")")
42 .call(d3.axisBottom(x));
43// Add the Y Axis
44 svg.append("g")
45 .call(d3.axisLeft(y));
46});我们再来看一下在 Preact 中如何绘制：
1/* @jsx h */
2let { Component, h, render } = preact
3function getTicks (count, max) {
4 return [...Array(count).keys()].map(d => {
5 return max / (count - 1) * parseInt(d);
6 });
7}
8class LineChart extends Component {
9 render ({ data }) {
10 let WIDTH = 500;
11 let HEIGHT = 300;
12 let TICK_COUNT = 5;
13 let MAX_X = Math.max(...data.map(d => d.x));
14 let MAX_Y = Math.max(...data.map(d => d.y));
15
16 let x = val => val / MAX_X * WIDTH;
17 let y = val => HEIGHT - val / MAX_Y * HEIGHT;
18 let x_ticks = getTicks(TICK_COUNT, MAX_X);
19 let y_ticks = getTicks(TICK_COUNT, MAX_Y).reverse();
20
21 let d = `
22 M${x(data[0].x)} ${y(data[0].y)}
23 ${data.slice(1).map(d => {
24 return `L${x(d.x)} ${y(d.y)}`;
25 }).join(' ')}
26 `;
27
28 return (
29 <div
30 class="LineChart"
31 style={{
32 width: WIDTH + 'px',
33 height: HEIGHT + 'px'
34 }}
35 >
36 <svg width={WIDTH} height={HEIGHT}>
37 <path d={d} />
38 </svg>
39 <div class="x-axis">
40 {x_ticks.map(v => <div data-value={v}/>)}
41 </div>
42 <div class="y-axis">
43 {y_ticks.map(v => <div data-value={v}/>)}
44 </div>
45 </div>
46 );
47 }
48}
49let data = [
50 {x: 0, y: 10},
51 {x: 10, y: 40},
52 {x: 20, y: 30},
53 {x: 30, y: 70},
54 {x: 40, y: 0}
55];
56render(<LineChart data={data} />, document.querySelector("#app"))CSS 代码：
1body {
2 margin: 0;
3 padding: 0;
4 font-family: sans-serif;
5 font-size: 14px;
6}
7.LineChart {
8 position: relative;
9 padding-left: 40px;
10 padding-bottom: 40px;
11}
12svg {
13 fill: none;
14 stroke: #33C7FF;
15 display: block;
16 stroke-width: 2px;
17 border-left: 1px solid black;
18 border-bottom: 1px solid black;
19}
20.x-axis {
21 position: absolute;
22 bottom: 0;
23 height: 40px;
24 left: 40px;
25 right: 0;
26 display: flex;
27 justify-content: space-between;
28}
29.y-axis {
30 position: absolute;
31 top: 0;
32 left: 0;
33 width: 40px;
34 bottom: 40px;
35 display: flex;
36 flex-direction: column;
37 justify-content: space-between;
38 align-items: flex-end;
39}
40.y-axis > div::after {
41 margin-right: 4px;
42 content: attr(data-value);
43 color: black;
44 display: inline-block;
45}
46.x-axis > div::after {
47 margin-top: 4px;
48 display: inline-block;
49 content: attr(data-value);
50 color: black;
51}看起来有许多的代码，但你应该注意到，我是用自己已经掌握的 Preact 框架（其他框架也一样，React、Vuew、Angular 等等）和 CSS 来绘制的。如果使用 D3 的话，那么首先你要了解一大堆的概念 … 但现在你只需要掌握自己正在使用的库，就能基于它做出更多的修改了。
看看它的打包大小
最坏情况下，D3 可能要引入大概 70+ 字节的代码。如果你仅仅是想调用一行函数，那么引入这么大的一个第三方库真的合适吗？
Canvas 和 HTML 优于 SVG
不知道你有没有注意到，上述代码我使用了 SVG 来帮助我绘制图形，绘制图形的时候人们总想用大量的 SVG 来完成任务。然而 CSS 已经今非昔比，它的崛起让 SVG 相形见绌。例如，在 SVG 中实现文字环绕的效果需要自己使用 JavaScript 代码动态计算：
1function wrap(text, width) {
2 text.each(function() {
3 var text = d3.select(this),
4 words = text.text().split(/\s+/).reverse(),
5 word,
6 line = [],
7 lineNumber = 0,
8 lineHeight = 1.1, // ems
9 y = text.attr("y"),
10 dy = parseFloat(text.attr("dy")),
11 tspan = text.text(null)
12 .append("tspan")
13 .attr("x", 0)
14 .attr("y", y)
15 .attr("dy", dy + "em");
16 while (word = words.pop()) {
17 line.push(word);
18 tspan.text(line.join(" "));
19 if (tspan.node().getComputedTextLength() > width) {
20 line.pop();
21 tspan.text(line.join(" "));
22 line = [word];
23 tspan = text.append("tspan")
24 .attr("x", 0)
25 .attr("y", y)
26 .attr("dy", ++lineNumber * lineHeight + dy + "em")
27 .text(word);
28 }
29 }
30 });
31}
而使用 CSS 仅需要一行 white-space: normal。利用 CSS 的 transform 和 border-radius 基本上可以绘制任何基本图形。我现在之所以还是用 SVG 的唯一原因就是 <path> 标签，它是创建任意图案的绝佳助手。
如果你想要再进一步提升性能，那么可以选择在 Canvas 中进行绘制，相比于其它两种方式，它能占用更少的内存，更新也更快。
你可能会反驳我说 Canvas 不能像 SVG 那样任意放大和缩小图案，当放大 Canvas 的时候，页面上的图案开始变得模糊不清。这是因为你在放大页面的时候，并没有相应的修改 Canvas 的宽度和高度，以下是这一问题的解决方案：
1onResize() {
2 let canvas = this.base.querySelector('canvas');
3 let ctx = canvas.getContext('2d');
4 let PIXEL_RATIO = window.devicePixelRatio;
5 canvas.width = canvas.offsetWidth * PIXEL_RATIO;
6 canvas.height = canvas.offsetHeight * PIXEL_RATIO;
7 ctx.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);
8
9 this.props.onDraw(ctx, canvas.offsetWidth, canvas.offsetHeight);
10}总结
如上所示，有种种原因表明 D3 现在已经过时了，自它发布之日到现在，前端已经发生了巨变。如果你只是画一些简单的图标，例如条形图、折线图等，那就先思考一下如何在你正在使用的框架中完成这些任务。而且，在代码维护方面这样也更加便捷。