Optymalizowanie grupy wykresów liniowych dc.js

Question

Mam grupę wykresów wizualizujących wiązkę danych dla mnie (here), oparta na csv z około 25 000 linii danych, z których każda ma 12 parametrów. Jednak interakcja (np. Wybór zakresu za pomocą pędzla na dowolnym z wykresów) jest powolna i nieporęczna, zupełnie niepodobna do the dc.js demo found here, która zajmuje się również tysiącami nagrań, ale utrzymuje płynne animacje, lub crossfilter's demo here, która ma 10 razy więcej rekordy (loty) jak ja.

Wiem, że głównymi świniami zasobów są dwie linijki, ponieważ mają punkty danych co 15 minut przez około 8 stałych miesięcy. Usunięcie któregoś z nich powoduje, że wykresy znów reagują, ale są one główną cechą wizualizacji, więc czy jest jakiś sposób, aby umożliwić im wyświetlanie mniej szczegółowych danych?

Kod dla dwóch linii wykresy konkretnie jest poniżej:

 var lineZoomGraph = dc.lineChart("#chart-line-zoom") 
      .width(1100) 
      .height(60) 
      .margins({top: 0, right: 50, bottom: 20, left: 40}) 
      .dimension(dateDim) 
      .group(tempGroup) 
      .x(d3.time.scale().domain([minDate,maxDate])); 

     var tempLineGraph = dc.lineChart("#chart-line-tempPer15Min") 
      .width(1100).height(240) 
      .dimension(dateDim) 
      .group(tempGroup) 
      .mouseZoomable(true) 
      .rangeChart(lineZoomGraph) 
      .brushOn(false) 
      .x(d3.time.scale().domain([minDate,maxDate])); 

Oddzielny ale istotne pytanie; Jak zmodyfikować oś Y na wykresach liniowych? Domyślnie nie obejmują one najwyższych i najniższych wartości znalezionych w zbiorze danych, co wydaje się dziwne.

Edycja: niektóre kod pisałem, aby spróbować rozwiązać problem:

var graphWidth = 1100; 
var dataPerPixel = data.length/graphWidth; 

var tempGroup = dateDim.group().reduceSum(function(d) { 
    if (d.pointNumber % Math.ceil(dataPerPixel) === 0) { 
     return d.warmth; 
    } 
}); 

d.pointNumber to wyjątkowy punkt ID dla każdego punktu danych, narastająco od 0 do 22 tys owski. Teraz jednak wykres liniowy jest pusty. Sprawdziłem dane grupy za pomocą funkcji tempGroup.all() i teraz co 21 punkt danych ma wartość temperatury, ale wszystkie pozostałe mają wartość NaN. Nie udało mi się w ogóle zmniejszyć rozmiaru grupy; nadal wynosi 22 tysiące. Zastanawiam się, czy to jest właściwe podejście ...

Edycja 2: znaleziono inne podejście. Tworzę normalnie grupę tempGo, ale potem tworzę kolejną grupę, która jeszcze bardziej filtruje istniejącą grupę tempGroup.

var tempGroup = dateDim.group().reduceSum(function(d) { return d.warmth; }); 
    var filteredTempGroup = { 
     all: function() { 
      return tempGroup.top(Infinity).filter(function (d) { 
       if (d.pointNumber % Math.ceil(dataPerPixel) === 0) return d.value; 
      }); 
     } 
    }; 

Mam problem tutaj jest to, że d.pointNumber nie jest dostępna, więc nie mogę powiedzieć, czy jest to n-ty punkt danych (lub wielokrotność tego). Jeśli przypiszesz go do var, to i tak będzie to po prostu stała wartość, więc nie jestem pewien jak to obejść ...

Answer 1

W przypadku problemów z wydajnością na wykresach opartych na d3, zwykłym winowajcą jest liczba elementów DOM, a nie rozmiar danych. Zauważ, że demo crossfilter ma wiele wierszy danych, ale tylko kilkaset słupków.

Wygląda na to, że możesz próbować narysować wszystkie punkty, zamiast je agregować. Wydaje mi się, że od czasu, gdy robisz serie czasowe, może być niezrozumiałe, aby zebrać punkty, ale zastanów się, że twoja działka może wyświetlać tylko 1100 punktów (szerokość), więc nie ma sensu przepracowywać silnika SVG, kreśląc 25 000.

Proponuję sprowadzić go do przedziału między 100-1000 pojemników, np. przez uśrednienie każdy dzień:

var daysDim = data.dimension(function(d) { return d3.time.day(d.time); }); 

function reduceAddAvg(attr) { 
    return function(p,v) { 
    if (_.isLegitNumber(v[attr])) { 
     ++p.count 
     p.sums += v[attr]; 
     p.averages = (p.count === 0) ? 0 : p.sums/p.count; // gaurd against dividing by zero 
    } 
    return p; 
    }; 
} 
function reduceRemoveAvg(attr) { 
    return function(p,v) { 
    if (_.isLegitNumber(v[attr])) { 
     --p.count 
     p.sums -= v[attr]; 
     p.averages = (p.count === 0) ? 0 : p.sums/p.count; 
    } 
    return p; 
    }; 
} 
function reduceInitAvg() { 
    return {count:0, sums:0, averages:0}; 
} 
... 
// average a parameter (column) named "param" 
var daysGroup = dim.group().reduce(reduceAddAvg('param'), reduceRemoveAvg('param'), reduceInitAvg); 

(średnia wielokrotnego zmniejszenia FUNKCJE from the FAQ)

Następnie określ swoje xUnits dopasować i używać elasticY do auto-obliczyć oś Y:

chart.xUnits(d3.time.days) 
    .elasticY(true)