javascript - javascript中的数学到svg坐标转换

Question

我必须使用 d3 编写一个用 javascript 和 svg 编写的可视化脚本。

现在我面临着不同的坐标系。

• 源数据的数学坐标(从左到右、从下到上)
• svg Canvas 的 SVG 坐标(从左到右，从上到下)

d3 或 svg 是否提供了一种通过转换来设置 Canvas 以采用数学模型的方法，或者我应该在代码中进行坐标转换？

Answer 1

有几种不同的解决方案，从 hacky transform = "scale(1,-1)" 到用于转换坐标的纯 JavaScript 函数。

但是，最简单的惯用 D3 解决方案是使用比例。例如，像这样的秤...

const scale = d3.scaleLinear()
    .domain([0, height])
    .range([height, 0])

...将很容易地将 SVG 上下垂直轴反转为更常见的自下而上数学轴。

这是一个演示。首先是普通代码，以 0, 0、2, 2、4, 4 等作为数据绘制一些圆圈:

const data = d3.range(100).map((d, i) => ({
  x: i * 2,
  y: d * 2
}));
const svg = d3.select("svg");
const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 1)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)

svg {
  background-color: lavender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

现在是相同的代码，但使用比例来反转垂直坐标:

const data = d3.range(100).map((d, i) => ({
  x: i * 2,
  y: d * 2
}));
const scale = d3.scaleLinear()
  .domain([0, 150])
  .range([150, 0]);
const svg = d3.select("svg");
const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 1)
  .attr("cx", d => d.x)
  .attr("cy", d => scale(d.y))

svg {
  background-color: lavender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>