【问题标题】:dc.js Row chart default view sorted and not reorder while onclickdc.js 行图默认视图已排序并且在 onclick 时不重新排序
【发布时间】:2017-06-01 11:05:07
【问题描述】:

我遇到并排显示两行图表的情况。我需要实现对组最高值的图形进行排序,这可以通过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

【问题讨论】:

标签: javascript d3.js dc.js crossfilter


【解决方案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 事件仅在第一次渲染(绘制)图表后触发。这个函数

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

当然,这假设以后不会出现新值,但我认为这是您问题中的隐含假设。

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

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

(请注意,调用可重用函数是为了创建闭包,它返回一个作为实际事件处理程序的函数。)

你的小提琴叉:http://jsfiddle.net/gordonwoodhull/04fcvgvu/5/

【讨论】:

  • 非常感谢...非常感谢。这就像魅力一样工作。:d
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-04-10
  • 2012-07-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多