Próbuję wykresować średnią na wykresie linii, gdzie oś X jest miesiąc, a oś Y jest pojemnością. Oto przykład danych, które próbuję wykres?

{month : "1", capacity: "48"}
{month : "1", capacity: "60"}
{month : "2", capacity: "67"}
{month : "2", capacity: "60"}
{month : "3", capacity: "66"}
{month : "3", capacity: "52"}
{month : "4", capacity: "63"}
{month : "4", capacity: "67"}
{month : "5", capacity: "80"}
{month : "5", capacity: "61"}
{month : "5", capacity: "66"}
{month : "6", capacity: "54"}
{month : "6", capacity: "69"}

Więc staram się wziąć średnią pojemność na każdy tydzień. Z jakiegoś powodu, gdy próbuję zlikować go za pomocą DC, linia nie pojawia się. Widzę liczby na osi X i Y, ale wykres jest pusty.

Oto mój kod, każda pomoc będzie wdzięczna

let chart = dc.lineChart("#chart");
let ndx = crossfilter(<example data from above>);
            
let monthDimension = ndx.dimension(function (d) {
     return d.month;
});

function reduceAdd(p, v) {
    ++p.count;
    p.total += v.capacity;
    p.average = p.total / p.count;
    return p;
}

function reduceRemove(p, v) {
    --p.count;
    p.total -= v.capacity;
    p.average = p.count ? p.total / p.count : 0;
    return p;
}

function reduceInitial() {
    return { count: 0, total: 0, average: 0 };
} 

let capacityGroup = monthDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);
            
chart.width(360)
    .height(200)
    .margins({ top: 20, right: 20, bottom: 50, left: 30 })
    .mouseZoomable(false)
    .x(d3.scale.linear().domain([0, 52]))
    .renderHorizontalGridLines(true)
    .brushOn(false)
    .dimension(weekDimension)
    .valueAccessor(function (d) {
        return d.value.average;
    })
    .group(capacityGroup );

dc.renderAll('chart');
1
fairlyMinty 21 listopad 2020, 07:58

1 odpowiedź

Najlepsza odpowiedź

Ach, przerażająca "pusta wykres". WSZYSTKIMALIŚMY

Na szczęście znajdowało się kilka błędów w konsoli przeglądarki, która pokazuje część drogi. Potem było kilka zmian, które myślę, że musisz tylko uczyć się przez doświadczenie.

Wprowadziłem następujące zmiany i uzyskałem wykres, który wygląda poprawnie.

  1. dc.renderAll() Zwykle nie ma parametru, chyba że masz wiele grup wykresów (UU. Wiele instancji Crossfiltera).
  2. d3.scale.linear() jest składni D3 @ 3; Zmieniłem go na d3.scaleLinear() dla D3 @ 6. Do Ciebie, która wersja chcesz użyć, jednak będziesz musiał użyć DC @ 2, jeśli chcesz korzystać z D3 @ 3.
  3. weekDimension nie został zdefiniowany; Zmieniłem go na monthDimension dla swoich danych.
  4. (Najbardziej subtelna zmiana.) Dane wejściowe to struny, które nie zostaną automatycznie konwertowane na liczby. Jeśli spróbujesz "dodać" ciągi, będą łączone, a otrzymasz duże liczby i dziwne wyniki.

Więc dodałem tę pętlę na górze, aby przekonwertować struny do liczb:

data.forEach(d => {
  d.month = +d.month;
  d.capacity = +d.capacity;
})

Możliwe jest również konwersję w locie, ale myślę, że jest bardziej wydajny i solidny zrobienie tego w górę.

chart screenshot

Fiddle Link.

2
Gordon 22 listopad 2020, 16:23