一、简介D3.js是什么

1. 一款基于JavaScript的函数库
2. 借助HTML、SVG和CSS等实现可视化
3. 组件强大，通过数据驱动的方式来操作DOM

   D3.js堪称SVG中的jQuery

二、vue引入D3.js

1. 安装d3

npm install d3 --save-dev 
或者
cnpm install d3 --save-dev

2. 引入d3

<template>
  <div></div>
</template>
<script>
import * as d3 from 'd3';   //引入d3
export default {
    data() {
        return {}
    }, 
}
</script>

三、绘制线条

drawPath(pathArr) {
  var body = d3.select('body');    //选择文档中的body元素
  var svg = body.select('svg');    //选择body中的svg元素
  var Gen = d3.line();     //线条
  var pathOfLine;          //path的坐标
  // 循环出pathArr每根线条的坐标
  pathArr.forEach(item => {
    // 将坐标点转化为path所需要的格式
    pathOfLine = Gen(item);
    svg
      .append('path')                 //增加<path>
      .attr('d', pathOfLine)          //d属性为path所需坐标点（具体字母对应如下所示）
      .attr('stroke', '#0F4E8A')      //线条颜色
      .attr('stroke-width', '2')      //线条粗细
      .attr('fill', 'transparent')    //填充颜色
      .attr('class', 'path');         //类型为'path'
  });
},

pathArr的样例数据格式

this.pathArr = [
  [
    [0, 100],
    [500, 100],
    [500, 200],
  ],
  [
    [0, 200],
    [500, 100],
    [500, 200],
  ],
];

pathOfLine的样例数据格式

M1,3 L5,10 L10,0

四、SVG中d属性详解

标准的指令字母

基础指令