Eu tenho um mapa de calor que mostra alguns dados e um sparkline para cada linha do mapa de calor. Se o usuário clicar em um rótulo de linha, os dados serão ordenados em ordem decrescente, para que cada retângulo seja colocado na posição correta. Viceversa, se o usuário clicar no rótulo de uma coluna.

Cada reação é colocada da maneira certa, mas não consigo colocar a linha de sparkline.

Aqui o código.

Quando o usuário clica no rótulo de uma linha, também o caminho dentro do svg que contém o sparkline deve ser atualizado. E então, quando o usuário clica no rótulo de uma coluna, osvg contendo o sparkline deve ser colocado na linha correta.

Para colocar o svg no lugar certo, tento usar ox ey atributos desvg. Eles são atualizados, mas o svg não muda de posição. Por quê? Aqui está um pedaço de código relacionado a isso:

var t = svg.transition().duration(1000);
var values = []; 
var sorted;
sorted = d3.range(numRegions).sort(function(a, b) {
    if(sortOrder) {
        return values[b] - values[a];
    } 
    else {
        return values[a] - values[b];
    }
});

t.selectAll('.rowLabel')
    .attr('y', function(d, k) {
        return sorted.indexOf(k) * cellSize;
    });

Além disso, não sei como mudar o caminho de cada sparklinesvg. Eu poderia pegar os dados e ordená-los manualmente, mas isso é bom apenas para a linha em que o usuário clicou e não para todos os outros.

Como eu posso fazer?