d3.js数据可视化从入门到放不下（四）—— 给图表加点“料”

上一篇，我们已经构建了一个基本的平面直角坐标系。本篇主要讲讲给如何给坐标系加上数据和过渡动画。

先整理一下svg的一些基础知识点：

示例代码：

<style>
  svg line {
    
    stroke: grey;
    stroke-width: 2;
  }

  svg circle {
    
    stroke: red;
    fill: none;
    stroke-width: 2;
  }

  svg rect {
    
    stroke: steelblue;
    fill: none;
    stroke-width: 2;
  }

  svg polygon {
    
    stroke: green;
    fill: none;
    stroke-width: 2;
  }
</style>

<script type="text/javascript">
  var width = 600,
    height = 500;

  var svg = d3.select("body").append("svg");

  svg.attr("height", height).attr("width", width);

  svg
    .append("line"