调整小倍数迷你图

我有一个热图，显示一些数据和热图每行的迷你图。 如果用户单击行标签，则数据按降序排列，因此每个矩形都会放置在正确的位置。 反之亦然，如果用户单击列标签。

每个反应都以正确的方式放置，但我无法放置迷你图。

这是代码 http://plnkr.co/edit/jJSFIXX8WqXZV3CXvY8T.

当用户单击行标签时，包含迷你图的 svg 内的路径也应更新。 然后，当用户单击列标签时，svg包含迷你图的内容应放置在正确的行中。

为了将 svg 放在正确的位置，我尝试使用x and 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。我可以获取数据并手动排序，但这仅适用于用户单击的行，而不适用于所有其他行。

我能怎么做？

这些迷你图的垂直和水平重新定位/重绘需要不同的方法：

垂直调整

对于这个解决方案我正在使用selection.sort, which:

返回一个新选择，其中包含根据比较函数排序的该选择中每个组的副本。排序后，重新插入元素以匹配结果顺序。

所以，首先，我们设置我们的选择：

var sortedSVG = d3.selectAll(".data-svg")

然后，自从selection.sort处理数据，我们绑定数据，这是关于你的SVG的索引sorted array:

.datum(function(d){
    return sorted.indexOf(+this.dataset.r)
})

最后，我们按升序比较：

.sort(function(a,b){
    return d3.ascending(a,b)
});

请记住，变化是立即的，而不是缓慢而美好的过渡。这是因为元素在 DOM 中被重新定位，并且新的结构会立即绘制。为了实现缓慢的过渡，您必须处理容器 div 内的 HTML 和 CSS（这可能值得提出一个新的具体问题）。

水平调整

这里的问题是从选择中获取所有相关数据：

var sel = d3.selectAll('rect[data-r=\'' + k + '\']')
    .each(function() {
        arr.push({value:+d3.select(this).attr('data-value'),
            pos: +d3.select(this).attr('data-c')});
    });

并根据它进行排序data-c。之后，我们将结果映射到一个简单的数组：

var result = arr.sort(function(a,b){
        return sorted.indexOf(a.pos) - sorted.indexOf(b.pos)
    }).map(function(d){
        return d.value
    });

结论

这是更新后的 Plunker：http://next.plnkr.co/edit/85fIXWxmX0l42cHx http://next.plnkr.co/edit/85fIXWxmX0l42cHx or http://plnkr.co/edit/85fIXWxmX0l42cHx http://plnkr.co/edit/85fIXWxmX0l42cHx

PS：您还需要重新定位圆圈。