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

Question

I am trying to follow a basic example for a stacked bar chart .

I use Angular v12.0.4 and d3 v7.0.0 according to package.json. I also set up a second Angular App with Angular v11.2.14 and d3 v6.7.0 for testing purposes since the example is for d3v6, but the problem was the same.

This is the data.csv:

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

I load the csv and prepare an array with the keys for stacking:

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"]

The data object looks like this in the console:

(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)

In the next step I would now use the d3.stack() function to get the needed array for use in the svg for the bars:

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

But I get an error for (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>

I found a very similar problem here . Unfortunately, it seems unresolved.

I also tried to replicate this process with different data, not using d3.csv as in this example :

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

The error for (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;
}[]

The d3.stack() function is used in the newest examples for stacked bar charts on Observabe . I read that stack() expects an object but data is an object, so that shouldn't be the problem.

What am I missing here?

Edit: I have another question posted here that might or might not be related since an example that should work doesn't, when implemented in Angular.

Answer 1

Found a solution to this problem here .

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

and

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