2015-09-12 2 views
0

Позвольте мне объяснить мою ситуацию.
Во-первых, Я выбрал использовать Dimple, потому что я новичок в d3, и я вижу углубление как способ постепенно познакомиться с d3 (но все же производить интересные сюжеты).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

Я использую следующий ОПЗ IPT, чтобы построить свой результат:

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 очками каждый ... это должно быть быстро.

(пс: Я также был немного разочарован тем, что работа с неплоском объектом JSON не легче)

ответ

0

Хорошо, оказался, что пытаюсь следовать этому ямочку примеру 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, использующий ямочку, не был хорошим путем (вероятно, потому, что я новичок в нем). Но все же это немного разочаровывает, что нет примеров использования более простого набора данных на странице углубления. В результате оказывается, что вводить в заблуждение очень простой набор данных (по моему мнению).

Смежные вопросы