[英]D3 problem rendering data on stacked area graph with time axis
I am trying to get a stacked area graph to render with d3 in angular, but when I add change value mapped to bottom axis from a small number 0,1,2,3 to a date 20190101,20200101,20210101 it no longer renders.我正在尝试获取一个堆叠面积图以在 angular 中使用 d3 进行渲染,但是当我添加从小数 0、1、2、3 映射到底轴的更改值到日期 20190101、20200101、20210101 时,它不再呈现。
I cannot seem to find how to solve this issue我似乎找不到解决这个问题的方法
Code in question:有问题的代码:
draw(graphAnchorId, data, timeline) {
const chartHeight = 100;
const chartWidth = 200;
const yScale = d3.scaleLinear().range([chartHeight, 0]).domain([0, 100]);
const xScale = d3.scaleLinear().domain([0, 14]).range([0, chartWidth]);
const tParser = d3.timeParse("%Y%m%d");
const colors = ["#ffa600BB","#ff6e54BB","#dd5182BB","#955196BB","#444e86BB","#003f5cBB"];
var stackGen = d3.stack().keys(["age1", "age2", "age3", "age4"]);
var stackedData = stackGen(data);
/*-----------Setup The Box to draw graph in---------------------------------------------------------------------------------------------------------------*/
var svg = d3
.select("#"+graphAnchorId)
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg") // Place the chart in 'pie-chart-div'
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 100 200") // <min-x> <min-y> <width> <height>
.classed("svg-content-responsive", true)
.attr("width", "100%")
.attr("height", "100%");
var vis = svg
.data([data]).attr("width", "95%").attr("height", "80%")
.attr("viewBox", -20 + " " + 20 + " " + (chartWidth) + " " + chartHeight)// <min-x> <min-y> <width> <height>
.attr("preserveAspectRatio", "xMinYMin");
/*-----------Setup The Box to draw graph in---------------------------------------------------------------------------------------------------------------*/
/*-----------Draw Graph---------------------------------------------------------------------------------------------------------------*/
const area = d3.area()
.x(function(d) { return xScale(d.data.date)})
.y0(function(d) { return yScale(d[0]);})
.y1(function(d) { return yScale(d[1]);});
const ageGroup =svg.selectAll('.valgroup')
.data(stackedData)
.enter()
.append('g')
.attr('class', 'valgroup')
.attr("stroke", "#222222CC")
.attr("stroke-width", 0.25)
.style('fill', function(d, i) {return colors[i];});
ageGroup.append('path').attr('d', function(d) { return area(d); })
/*-----------Draw Graph---------------------------------------------------------------------------------------------------------------*/
/*-----------Add Axis---------------------------------------------------------------------------------------------------------------*/
/*-----------Add Axis Y ------------------------------------------------------------*/
var y = d3.scaleLinear().domain([0, d3.max(data, function(d) { return d.age1+d.age2+d.age3+d.age4; })])
.range([ chartHeight, 0 ]);
svg.append("g").call(d3.axisLeft(y));
/*-----------Add Axis Y ------------------------------------------------------------*/
/*-----------Add Axis X ------------------------------------------------------------*/
if(timeline){
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) {console.log("date------>>>> ",d.date,tParser(d.date) ); return tParser(d.date); }))
.range([ 0, chartWidth ]);
svg.append("g")
.attr("transform", "translate(0," + chartHeight + ")")
.call(d3.axisBottom(x));
}else{
var x = d3.scaleLinear()
.domain([d3.min(data, function(d) { return d.date; }), d3.max(data, function(d) { return d.date; })])
.range([ 0, chartWidth ]);
svg.append("g")
.attr("transform", "translate(0," + chartHeight + ")")
.call(d3.axisBottom(x));
}
/*-----------Add Axis X ------------------------------------------------------------*/
/*-----------Add Axis---------------------------------------------------------------------------------------------------------------*/
}
here is a stack blitz: https://stackblitz.com/edit/angular-ivy-q689ep?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fapp%2Fapp.module.ts,src%2Fapp%2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.ts这是一个堆栈闪电战: https://stackblitz.com/edit/angular-ivy-q689ep?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fapp%2Fapp.module.ts,src%2Fapp% 2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.ts
Thanks for any help谢谢你的帮助
EDIT编辑
Note, with working on this I have realised that the data with the date is the issue,(x axis is not causing the problem).请注意,在处理此问题时,我意识到带有日期的数据是问题所在(x 轴不是导致问题的原因)。 it can render data like this: { date: 0 , age1: 31, age2: 10, age3: 32, age4: 27 },它可以像这样呈现数据:{ date: 0 , age1: 31, age2: 10, age3: 32, age4: 27 },
it cannot render data with this new date { date: 20180101 , age1: 31, age2: 10, age3: 32, age4: 27 },它无法使用此新日期呈现数据 { date: 20180101 , age1: 31, age2: 10, age3: 32, age4: 27 },
I solved this by swapping我通过交换解决了这个问题
const area = d3.area()
.x(function(d) { return xScale(d.data.date)})
.y0(function(d) { return yScale(d[0]);})
.y1(function(d) { return yScale(d[1]);});
for this为了这
const area = d3.area()
.x(function(d) { return x(d.data.date)})
.y0(function(d) { return yScale(d[0]);})
.y1(function(d) { return yScale(d[1]);});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.