[英]D3 stack area problem using typescript in angular
我试图根据以下代码在打字稿中编写堆积面积图:
http://jsfiddle.net/6LJjK/321/
我面临的问题是如何呈现堆栈。 它们似乎不是从彼此的顶部“放置”,而是从y轴的0开始绘制,而且顺序也错误。 我的猜测是这与
D3.stack()(<any>newDataset);
格式错误。
没有任何类型我得到以下错误:
Argument of type '{ x: any; y: any; y0: number; }[][]' is not assignable to parameter of type '{ [key: string]: number; }[]'. Type '{ x: any; y: any; y0: number; }[]' is not assignable to type '{ [key: string]: number; }'. Index signature is missing in type '{ x: any; y: any; y0: number; }[]'.
我的代码:
ngAfterViewInit() {
this.createChart();
}
getStackedData() {
const dataset = [
{ year: 1, age1: 31, age2: 10, age3: 32, age4: 27 },
{ year: 2, age1: 32, age2: 12, age3: 30, age4: 26 },
{ year: 3, age1: 24, age2: 19, age3: 32, age4: 25 },
{ year: 4, age1: 26, age2: 18, age3: 31, age4: 25 },
{ year: 5, age1: 22, age2: 17, age3: 34, age4: 27 },
{ year: 6, age1: 24, age2: 17, age3: 33, age4: 26 },
{ year: 7, age1: 31, age2: 15, age3: 32, age4: 22 },
{ year: 8, age1: 30, age2: 15, age3: 35, age4: 20 },
{ year: 9, age1: 27, age2: 18, age3: 31, age4: 24 },
{ year: 10, age1: 25, age2: 15, age3: 35, age4: 25 },
{ year: 11, age1: 34, age2: 12, age3: 33, age4: 21 },
{ year: 12, age1: 31, age2: 14, age3: 32, age4: 23 },
{ year: 13, age1: 27, age2: 18, age3: 30, age4: 25 },
{ year: 14, age1: 25, age2: 20, age3: 35, age4: 20 }
];
return dataset;
}
createChart() {
const RecivedData = this.getStackedData();
const svghHeight = 400;
const svgWidth = 500;
const marginTop = 10;
const marginBottom = 20;
const marginRight = 15;
const marginLeft = 30;
const chartHeight = 400 - marginTop - marginBottom;
const Chartwidth = 500 - marginLeft - marginRight;
const svgSelection = D3.select('#' + this.elementId).append('svg')
.attr('width', svgWidth + marginLeft + marginRight)
.attr('height', svghHeight + marginTop + marginBottom)
.style('background-color', 'white')
.attr('class', 'kpi-frame');
const baseGroup = svgSelection
.append('g')
.attr('transform', 'translate(' + marginLeft + ',' + marginTop + ')');
const yScale = D3.scaleLinear()
.range([chartHeight, 0])
.domain([0, 100]);
const xScale = D3.scaleLinear().range([0, Chartwidth]);
const yAxis = D3.axisLeft(yScale)
.tickSize(2)
.ticks(5)
.tickFormat(function (d: any) { if (d === 100) { return d + '%'; } else { return d; } });
const xAxis = D3.axisBottom(xScale).ticks(4);
const newDataset = ['age1', 'age2', 'age3', 'age4'].map(function (n) {
return RecivedData.map(function (d) {
return { x: d.year, y: d[n], y0: 0};
});
});
D3.stack()(<any>newDataset);
xScale.domain(D3.extent(RecivedData, function (d) { return d.year; }));
baseGroup.append('g')
.attr('class', 'xaxis')
.attr('transform', 'translate(0,' + chartHeight + ')')
.call(xAxis);
baseGroup.append('g')
.attr('class', 'yaxis')
.call(yAxis);
const area = D3.area()
.x(function (d: any) { return xScale(d.x); })
.y0(function (d: any) { return yScale(d.y0); })
.y1(function (d: any) { return yScale(d.y + d.y0); });
const colors = ['#75d481', '#ff4848', '#ffac2e', '#7dbbf8'];
const ageGroup = baseGroup.selectAll('.valgroup')
.data(newDataset)
.enter()
.append('g')
.attr('class', 'valgroup')
.style('fill', function (d, i) {
return colors[i];
});
ageGroup.append('path')
.attr('d', function (d: any) {
console.log(d);
return area(d);
});
}
}
堆叠从v3更改为v4。 我不确定旧版本的工作原理如何,但是在新版本中,不需要const newDataset = ['age1', 'age2', 'age3', 'age4'].map( ... )
部分,而是指定堆栈生成器的keys数组。
生成堆栈时,它将全部放入数组中,对于区域生成器, d
包含2D数组-y0和y1值。 对于x值,您可以访问d
的data属性并从那里查找它。
const dataset = [{ year: 1, age1: 31, age2: 10, age3: 32, age4: 27 }, { year: 2, age1: 32, age2: 12, age3: 30, age4: 26 }, { year: 3, age1: 24, age2: 19, age3: 32, age4: 25 }, { year: 4, age1: 26, age2: 18, age3: 31, age4: 25 }, { year: 5, age1: 22, age2: 17, age3: 34, age4: 27 }, { year: 6, age1: 24, age2: 17, age3: 33, age4: 26 }, { year: 7, age1: 31, age2: 15, age3: 32, age4: 22 }, { year: 8, age1: 30, age2: 15, age3: 35, age4: 20 }, { year: 9, age1: 27, age2: 18, age3: 31, age4: 24 }, { year: 10, age1: 25, age2: 15, age3: 35, age4: 25 }, { year: 11, age1: 34, age2: 12, age3: 33, age4: 21 }, { year: 12, age1: 31, age2: 14, age3: 32, age4: 23 }, { year: 13, age1: 27, age2: 18, age3: 30, age4: 25 }, { year: 14, age1: 25, age2: 20, age3: 35, age4: 20 } ]; const chartHeight = 200, chartWidth = 200; const yScale = d3.scaleLinear() .range([chartHeight, 0]) .domain([0, 100]); const xScale = d3.scaleLinear() .domain([0, 14]) .range([0, chartWidth]); const colors = ['#75d481', '#ff4848', '#ffac2e', '#7dbbf8']; var stackGen = d3.stack() .keys(["age1", "age2", "age3", "age4"]); var stackedData = stackGen(dataset); const area = d3.area() .x(function(d) { return xScale(d.data.year); }) .y0(function(d) { return yScale(d[0]); }) .y1(function(d) { return yScale(d[1]); }); var svg = d3.select('body') .append('svg') .attr('width', chartWidth) .attr('height', chartHeight); const ageGroup = d3.select('svg').selectAll('.valgroup') .data(stackedData) .enter() .append('g') .attr('class', 'valgroup') .style('fill', function(d, i) { return colors[i]; }); ageGroup.append('path') .attr('d', function(d) { return area(d); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="chart1"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.