我有以下数据csv
我的 Angular 项目中的文件也导入了D3.js
图书馆:
group,Nitrogen,normal,stress
banana,12,1,13
poacee,6,6,33
sorgho,11,28,12
triticum,19,6,1
我还在打字稿文件中添加了以下代码来显示堆叠栏:
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'app-stacked-bar',
templateUrl: './stacked-bar.component.html',
styleUrls: ['./stacked-bar.component.css']
})
export class StackedBarComponent implements OnInit {
data = [
{"group": "banana", "Nitrogen": "12", "normal": "1", "stress": "13"},
{"group": "poacee", "Nitrogen": "6", "normal": "6", "stress": "33"},
{"group": "sorgho", "Nitrogen": "11", "normal": "28", "stress": "12"},
{"group": "triticum", "Nitrogen": "19", "normal": "6", "stress": "1"}
];
svg: any;
margin = 50;
width = 750 - (this.margin * 2);
height = 400 - (this.margin * 2);
ngOnInit(): void {
this.createSvg();
this.drawBars(this.data);
}
createSvg(): void {
this.svg = d3.select("figure#stacked-bar")
.append("svg")
.attr("width", this.width + (this.margin * 2))
.attr("height", this.height + (this.margin * 2))
.append("g")
.attr("transform", "translate(" + this.margin + "," + this.margin + ")");
}
drawBars(data): void {
// List of subgroups - Header of the csv file.
// ["Nitrogen", "normal", "stress"]
const subgroups = data.columns.slice(1);
// List of groups - Value of the first column, called group.
const groups = data.map(d => (d.group));
// Create the X-axis band scale.
const x = d3.scaleBand()
.domain(groups)
.range([0, this.width])
//.domain(data.map(d => d.groups))
.padding(0.2);
// Draw the X-axis on the DOM.
this.svg.append("g")
.attr("transform", "translate(0," + this.height + ")")
.call(d3.axisBottom(x).tickSizeOuter(0));
// Create the Y-axis band scale.
const y = d3.scaleLinear()
.domain([0, 60])
.range([this.height, 0]);
// Draw the Y-axis on the DOM.
this.svg.append("g")
.call(d3.axisLeft(y));
// color palette = one color per subgroup
const color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#e41a1c','#377eb8','#4daf4a']);
// Stack the data per subgroup.
const stackedData = d3.stack()
.keys(subgroups)
(data);
// Create and fill the bars.
this.svg.append("g")
.selectAll("g")
.data(stackedData)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => x(d.data.group))
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth());
}
}
但我只得到一块空地。当我检查页面时,出现以下控制台错误:
类型错误:无法读取未定义的属性“切片”
由于某些类型的歧义data
, the slice
方法无法应用,但是当我只是复制和粘贴时["Nitrogen", "normal", "stress"]
代替subgroups
在代码中,一切正常!
有人可以帮我解决这个问题吗?
附注图表应如下所示: