D3.js 入门教程2 SVG基础 详细 一步步来

最近算是闲下来点了,可以有时间写个博客了,之前写过一篇,本来想着当时就接着写的,不过后来项目实在太紧,也就没有写,原计划是上一篇结束就进入深层次的图表交互的,不过经过之前一个项目的经验,基础还是很重要的,咱们做开发的永远不能停留在为用而用上面,结果突然来了一些奇怪的需求时被手忙脚乱!所以今天我想带来的是SVG方面的基础,我相信有很多伙伴对svg虽然不陌生,但是谈不上多熟悉吧!愿意看的,可以跟着我看一看,花不了多少时间喔!

1.SVG是什么
SVG是矢量图,简单说就是放大也不会失真!

 

他只是一个标签,width:宽度,height:高度。一般我们在开发中说的画布宽高;version:这是版本,1.1是03年定下来的吧。也是我用的!
七种基本形状元素
SVG定义了七种形状元素,也是构成SVG可视化视图的基本组成;
矩形:rect;圆形:circle;椭圆形:ellipse;线段:line;折线:polyline;多边形:polygon;路径:path;
比较常用的是rect、line、path、好多时候犯懒,一些小部件都是path出来的,哈哈;
矩形
相关属性 :
x : 矩形左上角的 x坐标
y : 矩形左上角的 y坐标
width : 矩形的宽度
height : 矩形的高度
rx : 对于圆角矩形,指定椭圆在x方向的半径
ry : 对于圆角矩形,指定椭圆在y方向的半径
style : 指定矩形的样式

实例:

正规矩形示例

圆角矩形示例

正规矩形示例

圆角矩形示例

矩形没有什么要注意的,很简单,不过也很常用; **圆形** 相关属性 : cx : 圆心的X坐标 cy : 圆心的Y坐标 r : 圆的半径

实例

圆形示例

圆形示例

**椭圆形** 相关属性 : cx : 椭圆圆心的X坐标 cy : 椭圆圆心的Y坐标 rx: 椭圆的水平半径 ry: 椭圆的垂直半径

实例

椭圆示例

椭圆示例

**线段** 相关属性 : x1: 起点的x坐标 y1: 起点的y坐标 x2: 终点的x坐标 y2: 终点的y坐标

实例

线段示例

线段示例





多边形和折线
相关属性 :
points: 这个参数的值是一系列点的坐标,多边形会将终点和起点连接起来,而折线图不会
实例

多边形实例

折线实例

多边形实例

折线实例

暂时到这里,来个BUG

你可能感兴趣的:(可视化)