交互式數據可視化－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... 瞭解