Javascript 在D3.js中反转热图上的y轴

查看D3.js中的热图

默认情况下，y轴自上而下。我以前曾在折线图上反转过y轴

但是，我不太确定如何在这里进行所需的反转。有什么想法吗

我的代码的相关部分（需要应用反转）如下所示：

var xGrid = d3.scale.linear()
  .range([0, w - 2])
  .domain([0, data.influencer_range.length]);

var yGrid = d3.scale.linear()
  .range([0, h - 2])
  .domain([0, data.omm_range.length]);

var xOrdinal = d3.scale.ordinal()
  .domain(data.influencer_range)
  .rangeBands([0, data.influencer_range.length]);

var yOrdinal = d3.scale.ordinal()
  .domain(data.omm_range).
  rangeBands([0, data.omm_range.length]);

var x = function(point) {
  return point * xGrid(1);
};

var y = function(point) {
  return point * yGrid(1);
}

---

首先，按照Google线程的指示，交换两个y范围值：

.range（[h-2，0]）

同样，您的约数也需要颠倒：

.rangeBands（[data.omm\u range.length，0]）

最后，反转会打断您对行高度的计算（

yGrid（1）

有点难，但哦，好吧），因此您也需要调整它：

返回点*yGrid（2）

---

这就是：

首先，按照Google线程的指示，交换两个y范围值：

.range（[h-2，0]）

同样，您的约数也需要颠倒：

.rangeBands（[data.omm\u range.length，0]）

最后，反转会打断您对行高度的计算（

yGrid（1）

有点难，但哦，好吧），因此您也需要调整它：

返回点*yGrid（2）

---

这里有：

这似乎是由于某种原因使x轴反转。从您的代码：

var row=xOrdinal（d[1]）；var列=等距（d[0]）为奇数，bc行（y-ish）映射到xOrdinal。因此，与我的答案中的第2步不同，如果您反转
xOrdinal
的范围，我认为您得到了您所期望的：。这似乎是由于某种原因使x轴反转。从您的代码：
var row=xOrdinal（d[1]）；var列=等距（d[0]）为奇数，bc行（y-ish）映射到xOrdinal。因此，如果您将
xOrdinal
的范围反转，而不是我的答案中的第2步，我认为您得到了您所期望的：。