座標系

在正常的數學座標系中，點 x = 0，y = 0 位於圖的左下角。但是在 SVG 座標系中，這個（0,0）點位於’canvas’的左上角，當你指定絕對/修復位置並使用 top 和 left 來控制時，它有點類似於 CSS 元素的確切點。

必須記住，隨著 SV 的增加，形狀向下移動。

假設我們要建立一個散點圖，每個點對應於 ax 值和 y 值。要縮放值，我們需要設定域和範圍，如下所示：

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

但是，如果你只保留這樣的設定，則點將基於頂部水平邊緣而不是底部水平線，這與我們的預期相同。

關於 d3 的好處是你可以通過簡單的域設定調整輕鬆改變它：

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

使用上面的程式碼，域的零點對應於 SVG 的高度，這是觀察者眼中圖表的底線，同時，源資料的最大值將對應於 SVG 的零點。座標系，這是觀眾的最大值。