javascript - 8k+ 项目的 dc.js lineChart 性能问题

Question

这是我关于 dc.js/d3.js/crossfilter.js 主题的第二个问题。我正在尝试实现一个基本的个人仪表板，我首先创建了一个非常简单的折线图(关联了一个范围图)，它随时间输出指标。

我拥有的数据保存为json(稍后将存储在mongoDb实例中，所以现在我使用JSON也保留日期时间格式) 看起来像这样:

[
{"date":1374451200000,"prodPow":0.0,"consPow":0.52,"toGridPow":0.0,"fromGridPow":0.52,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
{"date":1374451500000,"prodPow":0.0,"consPow":0.34,"toGridPow":0.0,"fromGridPow":0.34,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
{"date":1374451800000,"prodPow":0.0,"consPow":0.42,"toGridPow":0.0,"fromGridPow":0.42,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
...
]

我有大约 22000 个这样的条目，在打开仪表板时我遇到了很多性能问题。即使我尝试将数据分成一组 8000 条记录，性能仍然很差(但至少渲染会在一段时间后完成)并且与数据的交互很糟糕。我猜我的代码有一些缺陷导致它表现不佳，因为我预计 dc.js 和 crossfilter.js 会在 100k+ 条目和超过一维的情况下挣扎!

尽管如此，使用 chrome 进行分析和在线阅读并没有多大帮助(有关我稍后尝试更改的内容的更多详细信息)。

这是我的 graph.js 代码:

queue()
    .defer(d3.json, "/data")
    .await(makeGraphs);

function makeGraphs(error, recordsJson) {

    // Clean data
    var records = recordsJson;

    // Slice data to avoid browser deadlock
    records = records.slice(0, 8000);

    // Crossfilter instance
    ndx = crossfilter(records);

    // Define Dimensions
    var dateDim = ndx.dimension(function(d) { return d.date; });

    // Define Groups
    var consPowByDate = dateDim.group().reduceSum(function (d) { return d.consPow; });
    var prodPowByDate = dateDim.group().reduceSum(function (d) { return d.prodPow; });

    // Min and max dates to be used in the charts
    var minDate = dateDim.bottom(1)[0]["date"];
    var maxDate = dateDim.top(1)[0]["date"];

    // Charts instance
    var chart = dc.lineChart("#chart");
    var volumeChart = dc.barChart('#volume-chart');

    chart
        .renderArea(true)
        /* Make the chart as big as the bootstrap grid by not setting ".width(x)" */
        .height(350)
        .transitionDuration(1000)
        .margins({top: 30, right: 50, bottom: 25, left: 40})
        .dimension(dateDim)
        /* Grouped data to represent and label to use in the legend */
        .group(consPowByDate, "Consumed")
        /* Function to access grouped-data values in the chart */
        .valueAccessor(function (d) {
            return d.value;
        })
        /* x-axis range */
        .x(d3.time.scale().domain([minDate, maxDate]))
        /* Auto-adjust y-axis */
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
        /* When on, you can't visualize values, when off you can filter data */
        .brushOn(false)
        /* Add another line to the chart; pass (i) group, (ii) legend label and (iii) value accessor */
        .stack(prodPowByDate, "Produced", function(d) { return d.value; })
        /* Range chart to link the brush extent of the range with the zoom focus of the current chart. */
        .rangeChart(volumeChart)
        ;

    volumeChart
        .height(60)
        .margins({top: 0, right: 50, bottom: 20, left: 40})
        .dimension(dateDim)
        .group(consPowByDate)
        .centerBar(true)
        .gap(1)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .alwaysUseRounding(true)
        ;

    // Render all graphs
    dc.renderAll();
};

我使用 chrome 开发工具进行了一些 CPU 分析，结果总结如下:

• 顶部的 d3_json 解析大约需要 70 毫秒(独立于#records)
• 有 2000 条记录:
  • make_graphs 用时略低于 1 秒；
  • 维度聚合大约需要 11 毫秒；
  • groups 聚合大约需要 8 毫秒；
  • dc.lineChart 大约需要 16 毫秒；
  • dc.barChart 大约需要 8 毫秒；
  • 渲染 大约需要 700 毫秒(折线图需要 450 毫秒)；
  • 数据交互不是很流畅，但也足够了。
• 有 8000 条记录:
  • make_graphs 大约需要 6 秒；
  • 维度聚合大约需要 80 毫秒；
  • groups 聚合大约需要 55 毫秒；
  • dc.lineChart 大约需要 25 毫秒；
  • dc.barChart 大约需要 15 毫秒；
  • 渲染 大约需要 5.3 秒(折线图需要 3 秒)；
  • 数据交互很糟糕，过滤需要很多时间。
• 有了所有记录，浏览器停止运行，我需要停止脚本。

看完这篇thread我认为这可能是日期的问题，所以我尝试修改代码以使用数字而不是日期。这是我修改的内容(我将只写下更改):

// Added before creating the crossfilter to coerce a number date
records.forEach(function(d) {
    d.date = +d.date;
});

// In both the lineChart and barChart I used a numeric range
.x(d3.scale.linear().domain([minDate, maxDate]))

不幸的是，在性能方面没有明显的变化。我不知道如何解决这个问题，实际上我想向仪表板添加更多组、维度和图表...

---

编辑:这是一个github link如果你想自己测试我的代码。

我在服务器端使用了python3和flask，所以你只需要安装flask:

pip3 install flask

运行仪表板:

python3 dashboard.py

然后使用您的浏览器:

localhost:5000

Answer 1

如果不尝试很难判断，但可能发生的情况是唯一日期太多，因此您最终会得到大量的 DOM 对象。请记住，JavaScript 很快，但 DOM 很慢——因此处理多达 0.5 GB 的数据应该没问题，但在浏览器阻塞之前，您只能拥有几千个 DOM 对象。

然而，这正是 crossfilter 旨在处理的问题!您需要做的就是汇总。您将无法看到 1000 点；它们只会迷路，因为您的图表(可能)只有几百像素宽。

因此，根据时间尺度，您可以按小时汇总:

var consPowByHour = dateDim.group(function(d) {
    return d3.time.hour(d);
}).reduceSum(function (d) { return d.consPow; });

chart.group(consPowByHour)
    .xUnits(d3.time.hours)

或类似的分钟、天、年，等等。它可能比您需要的更复杂，但是 this example展示了如何在时间间隔之间切换。

(我不打算安装整个堆栈来尝试这个 - 大多数示例只是 JS，所以很容易在 jsfiddle 或其他任何地方尝试它们。如果这不能解释它，那么添加屏幕截图也可能是有帮助。)

编辑:我还注意到您的数据是整数，但您的比例是基于时间的。也许这会导致对象一直被构建。请尝试:

records.forEach(function(d) {
    d.date = new Date(+d.date); 
});