Bdtjtk

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)

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');

    })



});