javascript中的数学到svg坐标转换

Question

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

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

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

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

Answer 1

有几种不同的解决方案，从破解的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>