d3.js 坐标系

2024-04-12 12:47:04 427

示例

在正常的数学坐标系中，点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的零点座标系统，这对于观看者来说是最大值。