如何翻转我的 D3 图上的 Y 轴？答案

【问题标题】：How to flip the Y axis on my D3 graph?如何翻转我的 D3 图上的 Y 轴？
【发布时间】：2015-07-02 15:55:14
【问题描述】：

我有这张图：

我一直试图弄乱它并尝试翻转 y 轴。我需要的是刻度从左下角的 0,0 开始。我试过弄乱域和范围，但似乎无法解决我的问题：/

var y = d3.scale.linear()
    .range([0, width-200]);

【问题讨论】：

标签： javascript d3.js svg axis

【解决方案1】：

这是一个有效的版本：fiddle

首先，将轴域元素的顺序从([0,whatever]) 切换到([whatever,0]) 将反转比例。

第二，一个小错误。您只是在y 比例中使用width 而不是height。因此，由于该图不是正方形，因此长度不合适！

最后，我注意到您在这里和那里有一堆额外的调整，减去 200、axisMovement 变量、svg 周围的额外 g 元素等。所以你会有一个如果你清理掉那些不需要的部分，时间会更轻松。使用您所做的约定设置边距的目的是使这些额外的调整是不必要的。利用这些优雅的小技巧让人们真正迷上了 d3 :)

【讨论】：

完美答案，一开始真的很困惑，但这对我有很大帮助:) 谢谢
如果您不介意，还有一件事，您所做的编辑很棒，但 x 和 y 轴不匹配，我的意思是它们不能缩放：/它们都有相同的域，但它们的大小不同： /如果你理解我，我如何使用与 x 相同的比例，但尺寸更小，因为高度小于宽度？
嗯...这涉及到某种决定。由于数据以厘米为单位，我明白为什么您希望表示 1 厘米的距离在 x 轴和 y 轴上相同。您的数据非常正方形（您的数据的最大长度和宽度相似），所以对我来说，将图形设为正方形是有意义的。但是，如果您坚持使用这种“纵横比”，则必须使 xaxis 域最大值更大以强制“网格”为正方形。但是你的数据都将在图表的左侧，这也可能看起来很有趣。明白我的意思了吗？
设法弄明白了 :) 欢呼：stackoverflow.com/questions/31202802/…
stackoverflow.com/questions/45997405/… 你能看到这些人吗

【解决方案2】：

在 3D 中反转 Y 轴的方法很简单：

改变

var y = d3.scale.linear()
    .range([0, width-200]);

为

   var y = d3.scale.linear()
        .range([width-200 , 0]);

只需交换参数就可以了！

Demo Fiddle

【讨论】：

干杯，但你可以看到它不是从左下角的 [0,0] 开始的：/ ....
在这个关于 Y 轴的答案上有一个战利品，它应该可以帮助您恢复并正确调整它：stackoverflow.com/questions/20197961/reversed-y-axis-d3
stackoverflow.com/questions/45997405/…你能看到这个