dc.js /交叉过滤器性能问题12,000多行CSV数据 [英] dc.js / crossfilter performance issue 12,000+ rows of CSV data

问题描述

使用dc.js和crossfilter时出现一些性能问题。我正在创建一组显示不同尺寸的一些骑行数据的图形（代码此处，数据此处，可见的< a href = http://www.unc.edu/~shafferk/catl_interface/chart.html rel = nofollow noreferrer>此处）。图表会在几秒钟或两秒后呈现，但主要性能问题是在单击任意图表时出现的-过渡动画在延迟后会突然捕捉，这有点刺耳。我还注意到，仅删除页面顶部的空折线图会导致其余三个图形在过渡返回正常状态时表现更好。

I'm having some performance issues with using dc.js and crossfilter. I'm creating a set of graphs displaying different dimensions of some cycling data (code here, data here, viewable here). The charts render after a few second or two, but the main performance issues occur when clicking any of the graphs - the transition animations kind of "snap" after a delay, and it's a bit jarring. I've also noticed that just removing the empty line chart at the top of the page causes the three remaining graphs to perform much better with transitions returning to normal.

我看过一些类似的问题，例如这个问题，但这不一定似乎适用，因为我没有一次按多个维度划分。 12,000条记录是否正接近交叉过滤器可以处理的上限？该文件只有1.4 MB左右，因此出现这种大小的问题似乎有点令人惊讶，但也许这一切都表明我缺乏理解。不胜感激，不胜感激。感谢您的阅读。

I've looked at a few similar questions such as this one, but this doesn't necessarily seem applicable since I'm not splitting by multiple dimensions at one time. Is 12,000 records just getting toward the upper end of what crossfilter can handle? The file is only about 1.4 MB, so that seems a little surprising that there would be issues at this size, but maybe all this demonstrates is a lack of understanding on my part. Would greatly appreciate any pointers on this one as I'm stumped. Thanks for reading.

推荐答案

通常，这意味着某些事情会减慢Crossfilter的更新速度，从而导致浏览器冻结，直到完成大部分转换为止

Usually this means something is slowing down the Crossfilter updates, resulting in the browser freezing until most of the transition is already done.

唯一让我烦恼的是，您的dayOfWeek维度的访问器函数中有2个变量声明。最好在加载数据时预先定义该属性。

The only thing that sticks out at me is that you have 2 variable declarations in the accessor function for your dayOfWeek dimension. It would be better to define that property up-front when you load your data.

我看到的唯一其他可能的问题是数据中的Date对象和定义的维度基于它。这些类型的复杂对象会使事情变慢很多（并且d3.js日期解析不是特别快），但是我不认为这是Chrome分析器中的主要问题，因此我不认为认为这就是让您在这里慢下来的原因。

The only other possible problem I see is the Date object in your data and the dimension defined based on it. These types of complex objects can slow things down quite a bit (and the d3.js date parsing isn't extremely fast), but I don't see that showing up as a major problem in the Chrome profiler, so I don't think that's what's slowing you down here.

这篇关于dc.js /交叉过滤器性能问题12,000多行CSV数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！