Question

我有一个热图，显示热图的每一行的一些数据和一个迷你图。如果用户单击行标签，则数据按递减顺序排序，因此每个矩形都放在正确的位置。如果用户点击列标签，则为Viceversa。

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

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

要将svg放在正确的位置，我尝试使用x的{{1}}和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; });的路径。我可以手动获取数据并对其进行排序，但这仅适用于用户点击的行，而不适用于所有其他行。

我该怎么办？

Answer 1

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

垂直调整

对于此解决方案，我使用selection.sort，其中：

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

首先，我们设定选择：

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

然后，由于selection.sort处理数据，我们绑定数据，这是关于sorted数组的SVG的索引：

.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://plnkr.co/edit/85fIXWxmX0l42cHx

PS：你也需要重新定位圈子。

调整小倍数的迷你图

1 个答案:

垂直调整

水平调整

结论