调整小倍数迷你图 [英] Adjusting small multiples sparklines

问题描述

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

I have an heatmap that show some data and a sparkline for each line of the heatmap. If the user click on a row label, then the data are ordered in decreasing order, so each rect is placed in the right position. Viceversa, if the user click on a column label.

每个反应都放置在正确的位置，但我无法放置迷你图.

Each react is placed in the right way but I'm not able to place the sparkline.

此处是代码 .

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

When the user click on a row label, also the path inside the svg containing the sparkline should be updated. And then, when the user click on a column label, the svg containing the sparkline should be placed in the correct line.

为了将svg放置在正确的位置，我尝试使用svg的x和y属性.它们已更新，但svg不会更改其位置.为什么? 这是与此相关的一段代码:

To place the svg in the right place, I try to use the x and y attributes of svg. They are updated but the svg doesn't change its position. Why? Here is a piece of code related to that:

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的路径.我可以获取数据并手动对其进行排序，但这仅对用户单击的行有用，而对其他所有行都不有用.

Also, I don't know how to change the path of every sparkline svg. I could take the data and order them manually, but this is only good for the row on which the user has clicked and not for all the others.

我该怎么办?

推荐答案

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

The vertical and horizontal re-positioning/redrawing of those sparklines require different approaches:

对于此解决方案，我使用的是selection.sort，它是:

For this solution I'm using selection.sort, which:

返回一个新选择，该选择包含此选择中每个组的副本，该副本根据比较功能进行排序.排序后，重新插入元素以匹配结果顺序.

Returns a new selection that contains a copy of each group in this selection sorted according to the compare function. After sorting, re-inserts elements to match the resulting order.

因此，首先，我们进行选择:

So, first, we set our selection:

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

然后，由于selection.sort处理数据，因此我们绑定了数据，该数据是SVG关于sorted数组的索引:

Then, since selection.sort deals with data, we bind the datum, which is the index of the SVG regarding your sorted array:

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

最后，我们按升序对它们进行比较:

Finally, we compare them in ascending order:

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

请记住，更改是立即的，而不是缓慢而愉快的过渡.这是因为元素已在DOM中重新放置，并且新结构立即被绘制.为了实现缓慢的转换，您必须在容器div中处理HTML和CSS(这可能值得提出一个新的特定问题).

Have in mind that the change is immediate, not a slow and nice transition. This is because the elements are re-positioned in the DOM, and the new structure is painted immediately. For having a slow transition, you'll have to deal with HTML and CSS inside the container div (which may be worth a new specific question).

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

The issue here is getting all the relevant data from the selection:

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对其进行排序.之后，我们将结果映射到一个简单的数组:

And sorting it according to data-c. After that, we map the result to a simple array:

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:您还需要重新定位圆.

PS: You'll need to re-position the circles as well.

这篇关于调整小倍数迷你图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！