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

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

现在我面对的是不同的坐标系

• 源数据的数学坐标（从左到右，从下到上）
• SVG画布的SVG坐标（从左到右，从上到下）

---

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

有几种不同的解决方案，从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.选择（“svg”）；
const circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，1）
.attr（“cx”，d=>d.x）
.attr（“cy”，d=>d.y）

svg{
背景颜色：淡紫色；
}