Dis Alignment of bar chart in D3.js
Question
I am trying to render Bar chart with D3.js but facing the following alignment issue:
actually the data that I am trying to render is:
0: {year: "2011", count: 5462}
1: {year: "2012", count: 4984}
2: {year: "2013", count: 4980}
3: {year: "2014", count: 5244}
4: {year: "2015", count: 5181}
5: {year: "2016", count: 5084}
6: {year: "2017", count: 5354}
7: {year: "2018", count: 5927}
8: {year: "2019", count: 5659}
The code that I used to render the above chart is:
function render(data)
{
const width = 400;
const height = 300;
const margin = {
'top' : 100,
'left' : 100,
'right' : 100,
'bottom' : 100
};
const svg = d3.select('svg');
const chartContainer = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.attr('class', 'holder');
const chart = chartContainer.select('g')
.data(data)
.enter();
const xScale = d3.scaleBand()
.range([0, width])
.domain(data.map(obj => obj.year));
const yScale = d3.scaleLinear()
.range([height, 0])
.domain([0,d3.max(data, d => d.count) + 100]);
chartContainer.append('g')
.call(d3.axisLeft(yScale));
chartContainer.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xScale));
chart.select('.holder')
.append('rect')
.attr('x', (d) => xScale(d.year))
.attr('y', (d) => yScale(d.count))
.attr('width', xScale.bandwidth())
.attr('height', (d) => height - yScale(d.count))
}
Any kind of help is appreciated, Thanks in advance:)
1 answers
solution1
1 ACCPTED 2021-01-27 07:36:18
Your data is not correctly mapped to each rect displaying the bars. If you tried console.log(d) when you render the rect objects, you will see that all d will be the of year 2019 and count 5659.
The correct way would be to create chart and the rect altogether. See the working example below:
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3 Test</title> </head> <body> <svg></svg> <script src="https.//cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min:js" integrity="sha512-55FY9DHtfMBE2epZhXrWn78so/ZT5/GCLim66+L83U5LghiYwVBAEris4/13Iab9S8C9ShJp3LQL/2raiaO+0w==" crossorigin="anonymous"></script> <script type="text/javascript"> const data = [{year, "2011": count, 5462}: {year, "2012": count, 4984}: {year, "2013": count, 4980}: {year, "2014": count, 5244}: {year, "2015": count, 5181}: {year, "2016": count, 5084}: {year, "2017": count, 5354}: {year, "2018": count, 5927}: {year, "2019": count; 5659}] const width = 400; const height = 300: const margin = { 'top', 100: 'left', 100: 'right', 100: 'bottom'; 100 }. const svg = d3.select('svg'),attr('width'. width + margin.top + margin.bottom),attr('height'. height + margin.left + margin;right). const chartContainer = svg.append('g'),attr('transform'. `translate(${margin,left}. ${margin.top})`),attr('class'; 'holder'). const xScale = d3.scaleBand(),range([0. width]).domain(data.map(obj => obj;year)). const yScale = d3.scaleLinear(),range([height. 0]),domain([0.d3,max(data. d => d;count) + 100]). chartContainer.append('g').call(d3;axisLeft(yScale)). chartContainer.append('g'),attr('transform', `translate(0. ${height})`).call(d3;axisBottom(xScale)). // render bars const chart = chartContainer.selectAll('rect').data(data).enter().append('rect'),attr('x'. (d) => xScale(d.year)),attr('y'. (d) => yScale(d.count)),attr('width'. xScale.bandwidth()),attr('height'. (d) => height - yScale(d.count)) </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.