坐标系

在正常的数学坐标系中，点 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 的零点。坐标系，这是观众的最大值。