基本SVG元件

D3js基本上都是透過操作SVG顯示圖表以及各種圖形，必須先來介紹一下常見會使用到的SVG元件。

1. <g>

SVG元件容器，可以在<g></g>中放置各種SVG元件，在不同容器之間有先後順序且會互相覆蓋，而且容器內的子元件是會繼承容器的屬性。

通常我都拿來當作類似圖層的概念，可以輕易調動各元件群組的覆蓋情況，也可以透過屬性transform translate群組調度基礎定位。

範例：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

2. rect 基礎方形元件，可以輕鬆產出一方體，常用屬性：x y width height rx ry

3. circle 基礎圓形，常用屬性：cx cy r，定位點在中央。

4. line：產生一條線，常用屬性：x1 y1 x2 y2

5. path：可以繪製路徑。
   範例：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

d屬性就是用來定義要描繪的路徑。

大概說明一下這路徑的英文代號意義。

M, m Move To 移動至特定位置
L, l, H, h, V, v Line To 連線至某點
C, c, S, s Cubic Bézier Curve 三次貝茲曲線
Q, q, T, t Quadratic Bézier Curve 二次貝茲曲線
A, a Elliptical Arc Curve 橢圓曲線
Z, z ClosePath 封閉路徑回到起點。

看起來非常複雜，也非常難使用，但透過D3js的API，與資料互動下可以自動產出對應的路徑圖，幾乎可以在不接觸這些指令下完成特定的線圖，當然如果真的非常需要了解這些細節，也可以輕鬆至MDN找到對應指令的算法，以及特定需要的指令。

6. text：文字元件，常用屬性x y dx dy rotate lengthAdjust textLength
   可以直接使用繼承屬性font-family設定該文字元件的字體。或是直接透過class對此文字元件直接操作樣式。

7. polyline：透過各點連線創造出不封閉圖形。
   範例：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with the default fill -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polyline shape with stroke and no fill -->
  <polyline points="100,100 150,25 150,75 200,0"
            fill="none" stroke="black" />
</svg>

8. polygon：透過各點連線創造出封閉圖形。
   範例：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polygon with the default fill -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polygon shape with stroke and no fill -->
  <polygon points="100,100 150,25 150,75 200,0"
            fill="none" stroke="black" />
</svg>

結論

大部分複雜的圖形點位，都可以透過D3js輕鬆算出來，所以只要大概了解有哪些元件可以組成畫面就好。

參考

MDN
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands