1

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

默认情况下，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);
}
4

1 回答 1

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/

于 2012-11-29T19:42:44.530 回答