angular - d3 stacked bar chart in angular4 -
trying bostok's stacked bar chart run in angular 4.
i did post question on again running difficulty new error,
i've placed 2 functions stackmin , stackmax outside ngonchanges()
ngonchanges(){ console.log("change detected"); let self = this; let d3 = this.d3; let d3parentelement: any; let svg: any; let width: number = 500; let height: number = 150; let datas: {month: string, apples: number, bananas: number, cherries: number, dates: number}[] = []; let stack: any; let series: any; let margin: {top: number, right: number, bottom: number, left: number} = { top: 20, right: 30, bottom: 30, left: 60 }; if (this.parentnativeelement !== null) { d3.select("svg").remove(); svg = d3.select(this.parentnativeelement) .append('svg') .attr('width', width) .attr('height', height); datas = [ {month: "2015, 0, 1", apples: 3840, bananas: 1920, cherries: 960, dates: 400}, {month: "2015, 1, 1", apples: 1600, bananas: 1440, cherries: 960, dates: 400}, {month: "2015, 2, 1", apples: 640, bananas: 960, cherries: 640, dates: 400}, {month: "2015, 3, 1", apples: 320, bananas: 480, cherries: 640, dates: 400} ]; stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackordernone) .offset(d3.stackoffsetnone); series = stack(datas); var x = d3.scaleband() .domain(datas.map(function(d) { return d.month; })) .rangeround([margin.left, width - margin.right]) .padding(0.1); var y = d3.scalelinear() .domain([d3.min(series, stackmin), d3.max(series, stackmax)]) .rangeround([height - margin.bottom, margin.top]); .............. } function stackmin(serie) { return d3.min(serie, function(d) { return d[0]; }); } function stackmax(serie) { return d3.max(serie, function(d) { return d[1]; }); } } }
datencia has great repo on github examples of various d3 graphs in angular, unfortunately hasn't yet added stacked bar chart example.
thanks,
Comments
Post a Comment