D3.js SVG绘图实践：趋势缩略图

前言

写码，看书，思考，这周挺多感触的。

因为手上的项目前端用了Angular，所以UI改版的时候考虑了Angular-material，学校的项目前端用了React，所以也想接入ant-design mobile的那套设计规范，这两个都是业界非常不错的UI库，看他们的文档都会让你觉得能使手上的web应用瞬间高大上起来。

其实不然，即便是开源，也不是拿来就用那么美好，那晚尝试接入ant-design的轮播组件，出现下一张图片的一部分盖在上一张图片上情况，而官方文档写得极少，于是去看源码，发现了一些bug，自己用一些比较hack的方法纠正后发现组件体积大概有30k（压缩后），于是自己实现了一个light-swiper，未压缩只有4k，兼容性够用。

这件事让我清醒了一些，过去自己喜欢并且推崇的那些库，其实自己并没有深入地去了解别人的实现，万一某天这些通用性的库不能满足你的个性化需求，你该何去何从。

工具固然重要，可只有不依赖工具，工具才是真正为你所用。

---

不多说了，下面简单说说怎么用D3.js画一个趋势缩略图，先上效果图（截于Google Trend）：

D3.js与SVG

对SVG比较熟的老司机肯定一眼看穿这个图是怎么组成的：

就是两个SVG的path(不了解的可以先了解一下)，第一个用于绘制折线，第二个用于绘制区域。一开始我想一个path用于绘制区域就能达到这种效果了吧，后来效果不佳，还是采取了Google的实践，后面会提到。

---

标题还提到了D3.js，简单介绍一下。

D3.js是一个用于数据可视化的js库，以数据驱动的方式去操作SVG，或原生的DOM，数据驱动的方式很有意思，下面看代码会有感触。

源码

很简单的一个东西，直接放码过来好了：

<!DOCTYPE html>
<html>
<head>
<!-- 引入d3库 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg width="100" height="32"></svg>
  <script>
    var data = [100,321,50,100,80];
    var svg_height = 32;
    var svg_width = 100;
    var d = svg_width / data.length;
    //比例尺
    var scale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, svg_height]);
    //折线生成函数
    var line_generator = function(x,i) {
      var offset = -1;
      var line_data = data.map( function(y) {
        offset ++;
        return { y: svg_height - scale(y), x: offset * d };
      } );
      var lineFunction = d3.line().x(function(d){return d.x;}).y(function(d){return d.y;});
      return lineFunction(line_data);
    };
    //区域生成函数
    var area_generator = function(x,i) {
      var offset = -1;
      var area_data = data.map( function(y) {
        offset ++;
        return [offset * d, svg_height - scale(y)];
      } );
      var area = d3.area().y0(svg_height);
      return area(area_data);
    };
    setTimeout( function() {
      // line
      d3.select('svg')
        .data(data)         //数据驱动：根据data的长度去生成对应的path
        .append('path')
          .attr('stroke', 'rgb(66, 132, 243)')
          .attr('stroke-width', 2)
          .attr('fill', 'none')
          .attr('d', line_generator);
      // area
      d3.select('svg')
        .data(data)
        .append('path')
          .attr('stroke', 'none')
          .attr('fill', 'rgba(66, 132, 243, 0.2)')
          .attr('d', area_generator);
      }, 300 );
  </script>  
</body>
</html>

只用区域实现的效果：

对边界进行调整后：

第二个图因为做了调整，随意后面的比例有所变化，在产品中还是采取折线加区域的实现方式。下面是只用区域的代码。

<!DOCTYPE html>
<html>
<head>
<!-- 引入d3库 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg width="100" height="32"></svg>
  <script>
    var data = [100,321,50,100,80];
    var svg_height = 32;
    var svg_width = 100;
    var d = svg_width / data.length;
    //比例尺
    var scale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, svg_height]);
    //区域生成函数
    var area_generator = function(x,i) {
      var offset = -1;
      var area_data = data.map( function(y) {
        offset ++;
        //去除左右stroke
        if( offset == 0 ) return [-5, svg_height - scale(y)];
        if( offset == data.length - 1 ) return [offset * d + 30, svg_height - scale(y)];
        return [offset * d, svg_height - scale(y)];
      } );
      //去除下stroke
      var area = d3.area().y0(svg_height+10);
      return area(area_data);
    };
    setTimeout( function() {
      // area
      d3.select('svg')
        .data(data)
        .append('path')
          .attr('stroke', 'rgb(66, 132, 243)')
          .attr('fill', 'rgba(66, 132, 243, 0.2)')
          .attr('d', area_generator);
      }, 300 );
  </script>  
</body>
</html>

END

趋势图的实现比较简单，用D3.js有点杀鸡用牛刀的感觉，而且要引入D3.js（76.8k大小），不过D3.js确实好玩：

1. 基于数据去操作DOM
2. 提供了许多图形（SVG）生成函数
3. 想象空间比较大
4. 待探索…

另一个D3.js的实践

站点24小时PV图: