如何在D3图表上翻转Y轴？

Question

我有这张图：

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

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

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

Answer 1

这是一个有效的版本：fiddle

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

第二，一个小错误。您只是在width比例而不是y中使用height。因为图表不是正方形，所以它的长度不合适！

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

Answer 2

在3D中恢复Y轴的方法很简单：

更改

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

代表

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

只需交换参数就可以了！[/ p>

Demo Fiddle