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

Question

我有这张图：

http://jsfiddle.net/5c4sa6vb/1/

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

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

Answer 1

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

改变

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

为

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

只需交换参数即可解决问题！[​​=13=]

Demo Fiddle

Answer 2

这是一个有效的版本：fiddle

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

二、一个小错误。您只是在 y 量表中使用 width 而不是 height。所以由于图形不是正方形，所以它的长度不正确！

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