在 Angular v11/12 中使用 d3.stack() 实现堆积条形图时出现问题

Question

我正在尝试遵循 stacked bar chart 的基本示例。

我根据package.json使用Angularv12.0.4和d3 v7.0.0。我还使用 Angular v11.2.14 和 d3 v6.7.0 设置了第二个 Angular 应用程序用于测试目的，因为该示例适用于 d3v6，但问题是相同的。

这是data.csv:

group,Nitrogen,normal,stress
banana,12,1,13
poacee,6,6,33
sorgho,11,28,12
triticum,19,6,1

我加载 csv 并准备一个包含用于堆叠的键的数组：

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv")
  .then((data) => {
    let subgroups = data.columns.slice(1)
  }

console.log(subgroups) // ["Nitrogen", "normal", "stress"]

控制台中的数据对象如下所示：

(4) [{…}, {…}, {…}, {…}, columns: Array(4)]
0: {group: "banana", Nitrogen: "12", normal: "1", stress: "13"}
1: {group: "poacee", Nitrogen: "6", normal: "6", stress: "33"}
2: {group: "sorgho", Nitrogen: "11", normal: "28", stress: "12"}
3: {group: "triticum", Nitrogen: "19", normal: "6", stress: "1"}
columns: (4) ["group", "Nitrogen", "normal", "stress"]
length: 4
__proto__: Array(0)

在下一步中，我现在将使用 d3.stack() 函数获取所需的数组以用于条形图的 svg：

let stackedData = d3.stack().keys(subgroups)(data)

但是 (data) 出现错误：

Argument of type 'DSVRowArray<string>' is not assignable to parameter of type 'Iterable<{ [key: string]: number; }>'.
  The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
    Type 'IteratorResult<DSVRowString<string>, any>' is not assignable to type 'IteratorResult<{ [key: string]: number; }, any>'.
      Type 'IteratorYieldResult<DSVRowString<string>>' is not assignable to type 'IteratorResult<{ [key: string]: number; }, any>'.
        Type 'IteratorYieldResult<DSVRowString<string>>' is not assignable to type 'IteratorYieldResult<{ [key: string]: number; }>'.
          Type 'DSVRowString<string>' is not assignable to type '{ [key: string]: number; }'.
            Index signatures are incompatible.
              Type 'string' is not assignable to type 'number'.ts(2345)
(parameter) data: d3.DSVRowArray<string>

我发现了一个非常相似的问题here。不幸的是，它似乎没有得到解决。

我也尝试用不同的数据复制这个过程，而不是像 this example:

那样使用 d3.csv

let data1 = [
  {month: new Date(2018, 1, 1), apples: 10, bananas: 20, oranges: 15},
  {month: new Date(2018, 2, 1), apples: 15, bananas: 15, oranges: 15},
  {month: new Date(2018, 3, 1), apples: 20, bananas: 25, oranges: 15}
];

let stackedSeries = d3.stack().keys(["apples", "bananas", "oranges"])(data1);

//or this version:

let stackGen = d3.stack().keys(["apples", "bananas", "oranges"])

let stackedSeries = stackGen(data1);

(data1) 的错误：

Argument of type '{ month: Date; apples: number; bananas: number; oranges: number; }[]' is not assignable to parameter of type 'Iterable<{ [key: string]: number; }>'.
  The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
    Type 'IteratorResult<{ month: Date; apples: number; bananas: number; oranges: number; }, any>' is not assignable to type 'IteratorResult<{ [key: string]: number; }, any>'.
      Type 'IteratorYieldResult<{ month: Date; apples: number; bananas: number; oranges: number; }>' is not assignable to type 'IteratorResult<{ [key: string]: number; }, any>'.
        Type 'IteratorYieldResult<{ month: Date; apples: number; bananas: number; oranges: number; }>' is not assignable to type 'IteratorYieldResult<{ [key: string]: number; }>'.
          Type '{ month: Date; apples: number; bananas: number; oranges: number; }' is not assignable to type '{ [key: string]: number; }'.
            Property 'month' is incompatible with index signature.
              Type 'Date' is not assignable to type 'number'.ts(2345)
(local var) data1: {
    month: Date;
    apples: number;
    bananas: number;
    oranges: number;
}[]

d3.stack() 函数用于 Observabe 上堆积条形图的最新示例。我读到 stack() 需要一个对象，但 data 是一个对象，所以这不应该是问题。

我在这里错过了什么？

编辑：我发布了另一个问题 here，这个问题可能相关也可能不相关，因为在 Angular.

中实施时，一个应该起作用的示例不起作用

Answer 1

找到了这个问题的解决方案。

let data: any = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv")
.then((d) => {return d})

和

let data1: any = [
  {month: new Date(2018, 1, 1), apples: 10, bananas: 20, oranges: 15},
  {month: new Date(2018, 2, 1), apples: 15, bananas: 15, oranges: 15},
  {month: new Date(2018, 3, 1), apples: 20, bananas: 25, oranges: 15}
];

let stackedSeries = d3.stack()
  .keys(["apples", "bananas", "oranges"])(data1);

在 Angular v11/12 中使用 d3.stack() 实现堆积条形图时出现问题

Problem implementing Stacked Bar Chart using d3.stack() in Angular v11/12

javascript

d3.js

typescript

angular