я есть тепловая карта, которая показывает некоторые данные и спарклайн для каждой строки тепловой карты. Если пользователь нажимает на метку строки, то данные располагаются в порядке убывания, поэтому каждый прямоугольник размещается в правильном положении. Viceversa, если пользователь нажимает на метку столбца.

Каждый ответ размещен правильно, но я не могу разместить спарклайн.

Вот код.

Когда пользователь нажимает на метку строки, также должен быть обновлен путь внутри svg, содержащий спарклайн. И затем, когда пользователь нажимает на метку столбца,svg содержащие искровую линию должны быть расположены в правильной линии.

Чтобы разместить SVG в нужном месте, я пытаюсь использоватьx а такжеy атрибутыsvg, Они обновляются, но svg не меняет свою позицию. Почему? Вот фрагмент кода, связанный с этим:

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;
    });

Кроме того, я не знаю, как изменить путь каждого спарклайнаsvg, Я мог бы взять данные и заказать их вручную, но это хорошо только для строки, на которую нажал пользователь, а не для всех остальных.

Как я могу сделать?