Question

查看在D3.js中完成的jsFiddle热图。

默认情况下，y轴自上而下。我必须在as described in this conversation之前在折线图上反转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);
}

Answer 1

首先，正如Google主题所指示的那样，交换两个y范围值：.range([h - 2, 0])

同样，您的yOrdinal需要颠倒过来：.rangeBands([data.omm_range.length, 0])

最后，逆转打破了你对行高度的计算（yGrid(1)有点硬编码，但是很好），所以你也需要调整它：return point * yGrid(2)

你有它：http://jsfiddle.net/qrBBS/2/

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

1 个答案: