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

Question

我有这个图:

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

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

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

Answer 1

这是一个有效的版本:小提琴

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

第二,一个小错误.你只是width在你的y规模而不是使用height.因为图表不是正方形,所以它不是正确的长度!

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