我想每年創建一個累積折線圖。
我的資料是天數和值的無序串列：
date value
2019-10-10 32.3104
2020-12-29 190.4676
2019-01-02 400.1440
2020-12-21 100.0
2020-12-21 347.1200
2019-01-02 30.6
...
我想每年創建一條線，所以我對資料進行排序并使用匯總對資料進行匯總和分組：
data = {
const sortedData = rawdata.sort((a, b) => d3.ascending(a.date, b.date));
return d3.rollup(
sortedData,
(v) => d3.sum(v, (d) => d.value),
(d) => d.date.getFullYear(),
(d) => d.date
);
}
通過這種方式，我使用 d3.join 獲得了每年帶有線條的圖表
svg.append("g")
.selectAll('.line')
.data(data.values())
.join(
(enter) =>
enter
.append('path')
.attr('class', 'line')
.attr('fill', 'none')
.attr('stroke', (d, i) => colors[i])
.attr('stroke-width', 1.5)
.attr('d', line),
(update) =>
update.attr('d', line),
);
現在我希望這條線每年累計，但我不知道如何使用d3.cumsum每年的總和。
我不知道如何總結這些匯總資料 - 任何人都可以在這里幫助我嗎？
這是我在 ObservableHQ 上的圖表的完整作業示例
uj5u.com熱心網友回復：
如果您想讓資料保持與當前相同的格式，這樣您就不必更改任何其他代碼，那么您可以這樣做
data = {
const sortedData = rawdata.sort((a, b) => d3.ascending(a.date, b.date));
// rollups returns arrays of key-value pairs instead of a map
const groupByYearDate = d3.rollups(
sortedData,
(v) => d3.sum(v, (d) => d.value),
(d) => d.date.getFullYear(),
(d) => d.date
);
return new Map(
// for each year
groupByYearDate.map(([year, values]) => {
// summed is an array of numbers
const summed = d3.cumsum(values, d => d[1]);
// dates is an array of dates
const dates = values.map(d => d[0]);
// zip them together
const combined = d3.zip(dates, summed);
return [year, new Map(combined)]
})
);
}
這是一個稍微不同的示例，它對您的代碼進行了額外的更改。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/325993.html
標籤：d3.js
上一篇：在reduxsaga請求完成且資料存在后渲染visxwordcloud導致“只讀”錯誤
下一篇：路徑和圖形元素未顯示在D3中