javascript - d3js(+crossfilter/dc)箱线图性能

Question

我正在尝试使用 D3、Crossfilter 和 DC 的组合生成交互式箱线图，主要使用以下示例:https://github.com/dc-js/dc.js/blob/master/web/examples/box-plot.html

我的数据看起来更像是这样:

id      date        met1
6368    10/24/2013  0.84
6369    10/24/2013  0.67
6374    10/24/2013  0.96
6375    10/24/2013  0.97

大约有 50 万个数据点，这对于除箱线图之外的其他所有内容都适用。代码工作正常，箱线图也很好，但是当我在其他地方更改过滤器时，箱线图需要永远更新:

var met1Dim = data.dimension(function(d) {return "metric 01";});
var met1Values = met1Dim.group().reduce(
            function(p, v) {
                p.push(v.met1);
                return p;
            },
            function(p,v) {
                p.splice(p.indexOf(v.met1), 1);
                return p;
            },
            function() {
                return [];
            }

当我将整数作为数据传递时(只需将 v.met1 替换为 parseInt(v.met1 * 100))，性能会得到极大改善(但仍然不完全理想)，但这有点半途而废，我会喜欢在适当的范围内显示数据，而不是通过将所有内容强制为整数。最显着的减慢发生在我删除数据集时，我认为是 slice(indexOf()) 减慢了一切(使用 float 时)。我能做些什么来让这个操作更快吗？我在想也许使用 id 数据的关联数组是关键，但我不确定如何将关联数组传递到 reduce() 函数中。

谢谢。

Answer 1

使用 map 查找而不是 indexOf 肯定会有所帮助，但不幸的是，当您真正想要的只是进行基本分组时，您需要跳过这样的麻烦met1 值显示在顶层，因为这是 dc.js 所期望的。

如果 dc.js 允许您指定一个访问器函数，该函数允许您定义如何在需要时从绑定(bind)对象中提取 met1 值，那就太好了。 d3 在任何地方都使用这种模式，它非常方便(并且还可以让您免于这种性能密集型的杂耍)。

除非对 dc.js 进行此类更改，我认为您的 map 查找想法可能是最好的选择。您可以使用reduce 函数的闭包作用域来存储它。由于您的记录具有唯一的 ID，因此您可以只使用单个 map ，而无需担心冲突:

var indexMap = {};
var met1Values = met1Dim.group().reduce(
    function(p, v) {
        indexMap[v.id] = p.length;  // length before push is index of pushed element
        p.push(v.met1);
        return p;
    },
    function(p,v) {
        p.splice(indexMap[v.id], 1);
        return p;
    },
    function() {
        return [];
    }
);