d3-系列-基础简介

本篇文章会介绍怎么绘制一个圆圈，一条线，一个矩形。

1.SVG是什么？

先介绍SVG，在d3的世界里的重要性就如何html中的body元素一样，它可以认为d3元素的母体，么有SVG，d3就没有发挥的余地。一般来说，IE8一下的是不支持SVG的，因此对浏览器兼容方面是有点缺陷的。

1.1 如何绘制SVG？

首先要创建一个SVG元素，一般我们会把它保存下来，留作以后使用

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

仅仅创建它还不够，我们需要设置它的宽和高

svg.attr('width', 500).attr('height', 400);

d3.js是可以链式编程的，因此你可以把上面两句连成一句话来使用。

代替的html代码：

<svg width="500" height="400"></svg> 

2.如何在SVG的基础上绘制一个圆圈？

类似于绘制SVG一样，我们现在要在svg变量上append一个圆圈，而绘制圆圈需要圆的半径，圆圈的圆心坐在的横坐标和纵坐标，因此在代码里面我们也要写明这几点。

var circle = svg.append('circle').attr('cx', 250).attr('cy',250).attr('r',25);

代替的html代码： 

<circle cx="250" cy="25" r="25"/>

3.如何SVG的基础上绘制一个矩形？

我觉得走完第二步，大家肯定也知道矩形怎么绘制了，矩形在这里是rect元素，我们需要制定的是它的宽高以及左上角的横坐标纵坐标,以下代码我们绘制出一个姿色的矩形框，试着改变里面的值看看，你会意识到这些属性的意义，是不是很神奇？

var rect = svg.append('rect').attr('x',0).attr('y',0).attr('width',30).attr('height',30).attr('fill','purple');

代替的html代码

<rect x="0" y="0" width="30" height="30" fill="purple"/>

4.如何在SVG的基础上绘制一条线？线的元素师line，我们可以制定其实起始横纵坐标，填充颜色等，是不是等不及了？赶紧在自己浏览器中尝试看看吧？

var line = svg.append('line').attr('x1',0).attr('y1',0).attr('x2',500).attr('y2',50).attr('stroke','black');

代替的html代码

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

总结：顺着这样，其实在SVG中绘画d3基本上是这样的套路，下个版本我会讲述d3是怎么数据驱动图形的，以及我们可以一起来完成一个数据地图。