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 毫秒；
  • 组聚合大约需要 8 毫秒；
  • dc.lineChart大约需要 16 毫秒；
  • dc.barChart大约需要 8 毫秒；
  • 渲染大约需要 700 毫秒(折线图为 450 毫秒)；
  • 数据交互不是特别流畅，但也足够好了。
• 有 8000 条记录:
  • make_graphs大约需要 6 秒；
  • 维度聚合大约需要 80 毫秒；
  • 组聚合大约需要 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 设计要处理的问题!您需要做的就是聚合。你不会看到数千个点；它们只会迷路，因为您的图表(可能)只有几百像素宽。

因此，根据时间尺度，您可以按小时聚合:

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