本篇文章会介绍怎么绘制一个圆圈,一条线,一个矩形。
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是怎么数据驱动图形的,以及我们可以一起来完成一个数据地图。