dc.js 行图默认视图已排序且单击时不会重新排序

Question

我遇到并排显示两行图表的情况。我需要实现对具有组最高值的图形进行排序，我可以通过 chart.order() 来实现。场景：-

1. The initial load of the chart with sorted values.
2. on Click of the chart, Don't need the sorting or reordering of the bar. 
Filter can apply the chart without reordering the bar position

有什么解决办法吗？

jsFiddle

Answer 1

有趣的问题。我认为最简单的方法是在第一次渲染后拍摄值的快照，然后将其用于后续重绘。

我们将把它放入一个可重用的函数中，该函数为 postRender 事件创建一个事件处理程序：

function save_first_order() {
    var original_value = {}; // 1
    return function(chart) {
        chart.group().all().forEach(function(kv) { // 2
            original_value[kv.key] = kv.value;
        });
        chart.ordering(function(kv) { // 3
            return -original_value[kv.key];
        });
    };
}

postRender 事件仅在第一次呈现（绘制）图表后触发。这个函数

在闭包中保留其自己的值映射：该映射将仅受其应用到的图表影响
渲染发生时，它会保留当前的所有值 `group.all() 在该地图中，并且
更改排序函数以使用地图中的值而不是当前值

当然，这假设以后没有新值出现，但我认为这是你问题中的隐含假设。

我将它放在一个函数中以便可以重复使用，并将它应用于两个图表，如下所示：

rowChart
  // ...
    .on('postRender', save_first_order());

（请注意，调用可重用函数是为了创建闭包，它 returns 是一个函数，它是实际的事件处理程序。）

你的 fiddle 的分支：http://jsfiddle.net/gordonwoodhull/04fcvgvu/5/

dc.js 行图默认视图已排序且单击时不会重新排序

dc.js Row chart default view sorted and not reorder while onclick

javascript

d3.js

crossfilter

dc.js