交互式数据可视化－D3.js（一）

在D3中会穿插SVG 方便大家对D3对使用

SVG简介

可缩放矢量图(scalabel vector graphics)，是用于描述二维矢量图形的一种图形格式，是由W3C制订的开放标准。SVG使用XML格式来定义图形，IE8版本以后的浏览器绝大部份都支持SVG。

图形元素

使用SVG中的图形元素，可以在HTML文件中嵌入，也可以单独写成文件来使用。如：XXX.svg

    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
    </svg>

其中，width和height表示绘制区域的宽高，varsion表示版本号。需要绘制的图形都要添加到这一组SVG之间。
SVG中预定了七种形状元素：

1. 矩形 <rect>

2. 圆形 <circle>

3. 椭圆 <ellipse>

4. 线段 <line>

5. 折线 <polyline>

6. 多边形 <polygon>

7. 路径 <path>

这些元素表示形状的参数各有不同，但也有一些相同的属性。下面介绍这些元素的参数和示例。

矩形

矩形的参数共有6个：

• x: 矩形左上角X坐标

• y: 矩形右上角Y坐标

• width: 矩形的宽度

• height: 矩形的宽度

• rx: 对于圆角矩形，指定椭圆在X方向的半径

• ry: 对于圆角矩形，指定椭圆在X方向的半径

下面分别是绘制一个直角和圆角矩形:

    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="100" height="70" fill="#000"></rect>
        <rect x="120" y="10" width="100" height="70" fill="#000" rx="40" ry="20"></rect>
    </svg>

圆形和椭圆形

圆形多产生是3个：

• cx: 圆心的X坐标

• cy: 圆心的Y坐标

• r: 圆的半径

椭圆的参数和圆形类似，只是半径分为水平半径和垂直半径：

• cx: 圆心的X坐标

• cy: 圆心的Y坐标

• rx: 椭圆的水平半径

• ry: 椭圆的垂直半径

下面分别是绘制一个圆形和椭圆形:

    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="45" cy="45" r="35" fill="#0ff"></circle>
        <ellipse cx="155" cy="45" rx="55" ry="35" fill="#f0f"></ellipse>
    </svg>

线段

线段的参数是起点和终点的坐标:

• x1: 起点的X坐标

• y1: 起点的X坐标

• x2: 终点的X坐标

• y2: 终点的X坐标

绘制一个线段:

<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <line x1="10" y1="10" x2="100" y2="10" style="stroke:#000; stroke-width:5"></line>
</svg>

多边形和折线

多边形和折线意义都只有1个参数：

• points: 一系列的坐标点

不同之处多边形将会和折线连起来折线不连。下面分别是绘制一个多边形和折线:

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon points="100, 20 20, 90 60, 160 140, 160 180, 90" style="fill: #fff; stroke: #0f0; stroke-width: 5;"></polygon>
        <polyline points="100, 20 20, 90 60, 160 140, 160 180, 90" style="fill: #fff; stroke: #0f0; stroke-width: 5;" transform="translate(200, 0)"></polyline>
    </svg>

路径

<path>标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。

• 移动类

  • M=moveto: 将画笔移动到指定的坐标

• 直线类

  • L=lineto: 绘制直线到指定坐标

  • H=horizontal lineto: 绘制水平直线到指定坐标

  • V=vertical lineto: 绘制垂直直线到指定坐标

• 曲线类

  • C=curveto: 绘制三次贝塞尔曲线经过指定的控制点到达终点坐标

• 弧线类

  • A=elliptical arc: 绘制椭圆曲线到指定坐标

• 闭合类

  • Z=closepath: 绘制一条直线连接终点和起点。用来闭合图形

路径这里只做介绍。有兴趣的可以去[MOZ]: https://developer.mozilla.org... 了解