Bar chart unable to execute transition after button clicked - d3.js

Question

I am drawing a simple bar chart with two buttons to toggle the chart based on two datasets.
However, the chart does not do the transition when I click on the buttons.
The data is loaded from a csv file.
party,ge14,latest
PKR,47,50
DAP,42,42
Umno,54,38
GPS,0,19
PAS,18,18
Bersatu,13,16
Independent,3,12
Amanah,11,11
Warisan,8,9
GBS,0,3
Other BN parties,25,2
Upko,0,1
Source code
d3.csv('data/seatcount.csv')
.then(data => {
const width = 900,
height = 700,
margin = 25;
const svg = d3.select('#bar')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
.attr('preserveAspectRatio', 'xMinYMin')
.append('g');
// define scale
const xScale = d3.scaleBand()
.domain(data.map(d => d.party))
.range([margin, (width - margin)])
.padding(.2);
const yScale = d3.scaleLinear()
.domain([0, 60])
.range([(height - margin), margin]);
// define axes
const xAxis = d3.axisBottom(xScale)
.ticks(12)
const yAxis = d3.axisLeft(yScale)
.ticks(6);
svg.append('g')
.attr('transform', `translate(0, ${height - margin})`)
.call(xAxis)
.style('font-size', '.7em');
svg.append('g')
.attr('transform', `translate(${margin}, 0)`)
.call(yAxis)
.style('font-size', '.7em');
// plot columns
let cols = svg.selectAll('.col')
.data(data)
.enter();
cols.append('rect')
.attr('x', (d) => xScale(d.party))
.attr('y', (height - margin))
.attr('width', xScale.bandwidth())
.attr('height', 0)
.style('fill', '#dddddd')
.transition()
.delay((d, i) => 100 * i)
.attr('y', (d) => {
return yScale(d.latest)
})
.attr('height', (d) => (height - margin - yScale(d.latest)));
// label the bars
cols.append('text')
.attr('x', d => {
return (xScale(d.party) + xScale.bandwidth() / 2);
})
.attr('y', d => {
return (yScale(d.latest) + 13);
})
.style('fill', '#333333')
.attr('text-anchor', 'middle')
.text(d => d.latest)
.style('font-size', '.8em')
.style('visibility', 'hidden')
.transition()
.delay((d, i) => 100 * i)
.style('visibility', 'visible');
function moveCols(data, period) {
cols.data(data)
.transition()
.attr('x', function(d) {
return xScale(d.party);
})
.attr('y', function(d) {
console.log(yScale(d[period]));
return yScale(d[period]);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return (height - margin - yScale(d[period]));
});
cols.selectAll('text')
.remove();
cols.append('text')
.attr('x', d => {
return (xScale(d.party) + xScale.bandwidth() / 2);
})
.attr('y', d => {
return (yScale(d[period]) + 13);
})
.style('fill', '#333333')
.attr('text-anchor', 'middle')
.text(d => d[period])
.style('font-size', '.8em')
.style('visibility', (d, i) => {
// console.log(d[period]);
if (d[period] <= 0) {
return 'hidden';
} else {
return 'visible';
}
});
}
d3.select('#latest').on('click', () => {
moveCols(data, 'latest')
});
d3.select('#ge14').on('click', () => {
moveCols(data, 'ge14')
})
});
In the end, once I have clicked on #latest or #ge14, only the label of the bars changed, but not the bars themselves.
And there are errors showed in the console.
Uncaught TypeError: this.getAttribute is not a function
at ot.<anonymous> (d3.v5.min.js:2)
at ot.e (d3.v5.min.js:2)
at o (d3.v5.min.js:2)
at d3.v5.min.js:2
at fr (d3.v5.min.js:2)
at cr (d3.v5.min.js:2)

Answer 1

I have reformatted my code and it works! I got no complaint.
const margin = { top: 20, right: 20, bottom: 50, left: 40 },
width = 900
height = 700
const svg = d3.select('#bar')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
.attr('preserveAspectRatio', 'xMinYMin');
const x = d3.scaleBand()
.rangeRound([0, (width - margin.left - margin.right)])
.padding(0.1);
const y = d3.scaleLinear()
.rangeRound([(height - margin.bottom), 0]);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
d3.csv('data/seatcount.csv')
.then(data => {
data.forEach(d => {
d.party = d.party;
d.ge14 = +d.ge14;
d.latest = +d.latest;
});
x.domain(data.map(d => d.party));
y.domain([0, d3.max(data, d => d.latest)]);
let duration = 1000;
// define axes
g.append('g')
.attr('class', 'axis, x-axis')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
g.append('g')
.attr('class', 'axis, y-axis')
.call(d3.axisLeft(y));
// plot columns
g.selectAll('.col')
.data(data)
.enter()
.append('rect')
.attr('x', d => x(d.party))
.attr('y', height - margin.bottom)
.attr('width', x.bandwidth())
.attr('height', 0)
.attr('class', 'col')
.transition()
.duration(duration)
.attr('y', d => y(d.latest))
.attr('height', d => (height - margin.bottom - y(d.latest)))
.ease(d3.easeBounce);
g.selectAll('.label')
.data(data)
.enter()
.append('text')
.attr('class', 'label')
.attr('x', d => {
return (x(d.party) + x.bandwidth() / 2);
})
.attr('y', (d, i) => {
if (d.latest <= 5) {
return (y(d.latest) - 5);
} else {
return (y(d.latest) + 13);
}
})
.text(d => d.latest)
.style('font-size', '.8em')
.style('visibility', 'hidden')
.transition()
.delay(duration)
.style('visibility', 'visible');
function moveCols(data, period) {
y.domain([0, d3.max(data, d => d[period])]);
g.select('.y-axis')
.transition()
.call(d3.axisLeft(y));
g.selectAll('.label')
.remove();
g.selectAll('.col')
.data(data)
.transition()
.attr('x', d => x(d.party))
.attr('y', d => y(d[period]))
.attr('width', x.bandwidth())
.attr('height', d => (height - margin.bottom - y(d[period])))
.ease(d3.easeBounce);
g.selectAll('.label')
.data(data)
.enter()
.append('text')
.attr('class', 'label')
.attr('x', d => {
return (x(d.party) + x.bandwidth() / 2);
})
.attr('y', (d, i) => {
if (d[period] <= 5) {
return (y(d[period]) - 5);
} else {
return (y(d[period]) + 13);
}
})
.style('fill', '#333333')
.attr('text-anchor', 'middle')
.text(d => d[period])
.style('font-size', '.8em');
}
d3.select('#latest').on('click', () => {
moveCols(data, 'latest');
});
d3.select('#ge14').on('click', () => {
moveCols(data, 'ge14');
})
});