令d3.scaleLinear（）为“上下颠倒”

Question

使用svg绘制图表时，通常需要“翻转” y轴/比例：

• 在svg空间中，左上角为零，较高的x和y值向右下角。
• 在典型的域坐标系中，左下角为零，较高的x和y值朝右上角。

使用d3.scaleLinear（），我知道有两种方法可以做到这一点：

• 翻转域：var yScale = d3.scaleLinear().domain([vx1, vx0]).range([0, 400]);
• 翻转范围：var yScale = d3.scaleLinear().domain([vx0, vx1]).range([400, 0]);

这两种方法似乎都不理想。如果我想对范围或域进行进一步的计算，通常有利的是在domain [0] / range [0]处使用较小的值，在domain [1] / range [1]中使用较高的值。翻转其中之一可能会引起混乱。

这两种方法中哪个更常见或推荐？还是有第三种方式，秤本身会翻转，但范围和域都具有“正确”的顺序？

Answer 1

我会总是把.range()倒过来，因为这更加正确。比例尺的目的是将输入数据范围转换为输出像素范围。在这种情况下，数据范围符合您的预期，但是像素坐标被反转了，因此反转了范围。