Инвертирование оси y на карте нагрева в D3.js

Question

Проверьте это jsFiddle тепловой карты, сделанной в D3.js.

По умолчанию ось y идет сверху вниз. Я должен был преобразовать оси Y в линейные диаграммы до as described in this conversation.

Однако я не совсем уверен, как сделать требуемую инверсию здесь. Есть идеи?

Соответствующие части моего кода (где инверсии необходимо будет применяться) следующим образом:

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 инструктирует, поменять местами два значения у-диапазон: .range([h - 2, 0])

Точно так же, ваш yOrdinal должен быть обратным: .rangeBands([data.omm_range.length, 0])

Наконец, реверсирование ломает ваш расчет высоты строки (yGrid(1) любопытное жёстко-у, ну да ладно), так что вам нужно настроить его тоже: return point * yGrid(2)

А что у вас есть: http://jsfiddle.net/qrBBS/2/