使用 crossfilter 和 dc.js 繪制平均值

Question

我試圖在折線圖上繪制平均值，其中 x 軸是月份，y 軸是容量。 這是我嘗試繪制的數據示例：

{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"}

所以我試圖計算每周的平均容量。 出於某種原因，當我嘗試使用 dc 繪制它時，這條線沒有出現。 我看到 x 和 y 軸上的數字，但圖形是空白的。

這是我的代碼，任何幫助將不勝感激

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');

Answer 1

啊，可怕的“空白圖表”。 我們都遇到過。

幸運的是，瀏覽器控制台中有一些錯誤顯示了部分方式。 然后有一些變化，我想你只需要通過經驗學習。

我進行了以下更改並得到了一個看起來正確的圖表。

1. dc.renderAll()通常不帶參數，除非您有多個圖表組（通常是 crossfilter 的多個實例）。
2. d3.scale.linear()是 D3@3 語法； 對於 D3@6，我將其更改為d3.scaleLinear() 。 取決於您想使用哪個版本，但是如果您想使用 D3@3，則需要使用 dc@2。
3. weekDimension未定義； 我為您的數據將其更改為monthDimension 。
4. （最細微的變化。）您的輸入數據是字符串，不會自動轉換為數字。 如果您嘗試“添加”字符串，它們將連接起來，您將得到大數字和奇怪的結果。

所以我在頂部添加了這個循環，將字符串轉換為數字：

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

也可以即時轉換，但我認為預先進行轉換更有效、更可靠。

小提琴鏈接。