Правильно разместите метки на осях в D3.js

У меня есть тепловая карта, на которой показаны некоторые данные. Если пользователь нажимает на метку (ось x или y), данные сортируются правильно. Моя проблема - правильное расположение меток до и после сортировки данных.

Это PLUNKER.

Как видите, изначально график выглядит так:

Метки на оси y правильные, а метки на оси x - нет, потому что все они должны быть на одной высоте. Вместо этого они спускаются.

Когда я нажимаю на ddd, он становится:

Та же проблема.

когда я нажимаю на 2001, он становится:

Теперь все в беспорядке.

Код, управляющий расположением меток, следующий:

var rowLabels = svg.append('g')
    .attr('class', 'rowLabels')
    .selectAll('.rowLabels')
    .data(regionsName)
    .enter().append('text')
    .text(function(d) {
        return d;
    })
    .attr('x', 0)
    .attr('y', function(d, i) {
        return i * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(-25, 11)';
    })
    .attr('class', 'rowLabel mono')
    .attr('id', function(d) {
        return 'rowLabel_' + regionsName.indexOf(d);            
    })
    .attr('font-weight', 'normal')
    .on('mouseover', function(d) {
        d3.select(this).attr('font-weight', 'bold').style('fill', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).attr('font-weight', 'normal').style('fill', 'black');
    })
    .on('click', function(d, i) {
        rowSortOrder = !rowSortOrder;
        sortByValues('r', i, rowSortOrder);
    });

var colLabels = svg.append('g')
    .attr('class', 'colLabels')
    .selectAll('.colLabels')
    .data(yearsName)
    .enter().append('text')
    .text(function(d) {
        return d;
    })
    .attr('x', 0)
    .attr('y', function(d, i) {
        return i * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(0, -3) rotate(-65)';
    })
    .attr('class', 'colLabel mono')
    .attr('id', function(d) {
        return 'colLabel_' + yearsName.indexOf(d);          
    })
    .attr('font-weight', 'normal')
    .style('text-anchor', 'left')
    .attr('dx', '.8em')
    .attr('dy', '.5em')
    .on('mouseover', function(d) {
        d3.select(this).attr('font-weight', 'bold').style('fill', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).attr('font-weight', 'normal').style('fill', 'black');
    })
    .on('click', function(d, i) {
        colSortOrder = !colSortOrder;
        sortByValues('c', i, colSortOrder);
    });

а также:

t.selectAll('.colLabel')
    .attr('y', function(d, i) {
        return sorted.indexOf(i) * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(-10, 2) rotate(-65) rotate(0, 0, ' + (sorted.indexOf(i) * cellSize) + ')';
    });

а также:

t.selectAll('.rowLabel')
    .attr('y', function(d, i) {
        return sorted.indexOf(i) * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(-5, 0)';
    });

Тысячу раз менял, думал, но ничего. Кто-нибудь знает, как мне помочь?