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有点困难，但最终还是值得的。我确信使用dimple的JavaScript代码不是继续进行的好方法（可能是因为我是新手）。但仍然有点令人失望的是，在凹坑页面上没有使用更简单的数据集的例子。因此，使用非常简单的数据集（据我所知）会让人感到困惑。

D3 - Dimple基本示例提高了速度

1 个答案: