D3 - 酒窝基本示例提高速度

Question

让我解释一下我的情况。
首先，我选择使用 Dimple，因为我是 d3 的新手，我认为 dimple 是一种逐渐熟悉 d3 的方式（但仍会产生有趣的情节）。

我想绘制多线图。
每条线代表一天中某个位置的电力需求。

数据来自 Python 算法，形状如下：

{ time:[00:00:00...23:59:59], locationName1:[power values], ..., locationNameN:[]}

为了绘制它，我把它转换成平面格式，所以我写了一段代码来创建一个 csv 文件，例如有 3 列：

"Time,Location,Power_Demand"  
"00:00,Home,1000"  
"...,...,..."

我的 csv 文件大约为 0.14MB

我使用以下脚本绘制我的结果：

   var svg = dimple.newSvg("#chartContainer", 1500, 800);
   d3.csv("data.csv", function (data) {
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(100, 100, 1000, 620)
    var x = myChart.addTimeAxis("x", "Time", "%H:%M:%S", "%H:%M");
    x.addOrderRule("Time");
    var y = myChart.addMeasureAxis("y", "Power_Demand");
    y.overrideMax = 300000;
    y.overrideMin = 0;
    var s = myChart.addSeries(["Location"], dimple.plot.line);
    myChart.addLegend(130, 10, 400, 35, "right");
    myChart.draw();
   });

绘制大约需要1分钟。

我的主要问题是：为什么这么慢？是我的 JavaScript 代码吗？最后它只有5条曲线，每条曲线有1439个点......应该很快。

(ps：我也有点失望，因为使用非平面 JSON 对象并不容易）

Answer 1

好吧，结果是尝试按照这个酒窝示例 http://dimplejs.org/examples_viewer.html?id=lines_horizontal_stacked 让我以一种奇怪的方式格式化我的数据而没有质疑它。

我决定改用 http://bl.ocks.org/mbostock/3884955 并意识到我也可以在这种平面格式下写入数据：

Time,Location1,Location2,...,LocationN
00:00,power value1.1,power value2.1,...,power valueN.1

结果是即时的。一开始不使用 Dimple 有点困难，但最终还是值得的。我确信我的 JavaScript 使用 dimple 的代码不是继续的好方法（可能是因为我是新手）。但仍然有点失望的是，酒窝页面上没有使用更简单的数据集的例子。因此，使用一个非常简单的数据集（据我所知）会让人感到困惑。

D3 - 酒窝基本示例提高速度

D3 - Dimple basic example improve rapidity

javascript

d3.js

dimple.js