在D3.js中反轉熱圖上的y軸

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

首先，作爲谷歌線程指示，交換兩個y值範圍：.range([h - 2, 0])

同樣，你yOrdinal需要扭轉：.rangeBands([data.omm_range.length, 0])

最後，反轉傷了你的一排高度的計算（yGrid(1)是有點兒硬編碼-Y，但哦），所以你需要調整它太：return point * yGrid(2)

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