d3js（+ crossfilter / dc）箱线性能 [英] d3js (+crossfilter/dc) boxplot performance

问题描述

我试图使用D3，Crossfilter和DC的组合生成交互式盒图，主要使用此示例： https://github.com/dc-js/dc.js/blob/master/web/examples/box-plot.html

I'm trying to use a combination of D3, Crossfilter, and DC generate interactive boxplots, mainly using this example: https://github.com/dc-js/dc.js/blob/master/web/examples/box-plot.html

我的数据看起来更像这样：

My data looks more like this:

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万个数据点，除了箱线图外，其他一切都可以正常工作。代码工作正常，boxplots罚款，但是当我更改过滤器在其他地方需要永远更新boxplots：

with around half a million data points, which works fine for everything else except for the boxplots. The code works fine and the boxplots are fine, but when I change the filter elsewhere it takes forever for the boxplots to update:

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）），但这是一种半补偿，我想显示他们的数据当我删除数据集时，最显着的减速发生，我认为这是切片（indexOf（）），它减缓了所有的东西（当使用浮动）。有什么我可以做我认为也许一个关联数组使用id数据是一个关键，但我不知道如何将关联数组传递给reduce（）函数。

Performance is drastically improved (but still not exactly ideal) when I pass integers as the data (just by replacing v.met1 with parseInt(v.met1 * 100)), but that's sort of half-assed and I'd like to display the data in their proper range, not by coercing everything into an integer. The most significant slowdown occurs when I'm removing datasets, and I think it's the slice(indexOf()) that's slowing everything down (when using floats). Is there anything I can do to make this operation faster? I was thinking maybe of an associative array using the id data is a key, but I'm not sure how to pass associative arrays into the reduce() function.

感谢。

推荐答案

使用地图查找代替 indexOf 肯定会有帮助，但它仍然不幸，你需要跳过这样的箍，当你真正想要的，只要我能告诉是只是做一个基本的分组与 met1 值显示在顶层，因为这是dc.js期望的。

Using a map lookup instead of indexOf will definitely help but it's still unfortunate that you need to jump through such hoops when all you really want as far as I can tell is to just do a basic grouping with the met1 values showing up at the top level because that's what dc.js expects.

这将是非常好的如果dc.js允许你指定一个访问器函数，以定义如何在需要的时候从绑定对象中提取 met1 值。 d3使用这种模式无处不在，它非常方便（并且也节省了你从这种性能集中的玩笑）。

It would be very nice if dc.js allowed you to specify an accessor function that allowed you to define how you want the met1 value pulled from the bound objects at the point at which it's needed. d3 uses this pattern everywhere and it's very convenient (and also saves you from this kind of performance intensive juggling).

除了这种改变dc.js，我想你的地图查找的想法可能是最好的赌注。您可以使用reduce函数的闭包范围来存储它。由于您的记录具有唯一的ID，您只需使用单个地图，而无需担心冲突：

Barring this sort of change to dc.js, I think your idea for a map lookup is probably the best bet. You can use the closure scope of your reduce functions to store it. Since your records have unique ids you can just use a single map without needing to worry about collisions:

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 [];
    }
);

这篇关于d3js（+ crossfilter / dc）箱线性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！