d3.js 坐标系
示例
在正常的数学坐标系中，点x=0，y=0位于图形的左下角。但在SVG坐标系中，此(0,0)点位于“画布”的左上角，当您将位置指定为绝对/固定并使用顶部和左侧控制位置时，它有点类似于CSS。元素的确切点。
必须牢记的是，随着SVG中y的增加，形状会向下移动。
假设我们要创建一个散点图，每个点对应于ax值和y值。要缩放该值，我们需要像这样设置域和范围：
d3.svg.scale() .range([0, height]) .domain([0,max])
但是，如果仅保留这样的设置，则这些点将基于顶部水平边缘而不是我们期望的底部水平线。
d3的好处是，您可以通过在域设置中进行简单的调整来轻松更改此设置：
d3.scale.linear() .range([height, 0]) .domain([0, max])
使用上面的代码，域的零点对应于SVG的高度，该高度是查看者眼中图表的底线，同时，源数据的最大值将对应于SVG的零点座标系统，这对于观看者来说是最大值。