CODEWITHSUNDEEP
javascriptd3.js
Robert Andersson
Robert Andersson

Reputation: 1521

Sorting function issue with grouped bar chart

This question is similar to my previous question here, the difference is that the answer to that question doesn't work for my new chart.

Code here: Plunker

The issue is that the sorting toggle checkbox stops sorting the chart when you try to uncheck the box again.

If I remove the function from d3.select("#myCheckbox") and replace it with d3.select("#myCheckbox").on('change', update) it works again, but rather than the bars shifting x position it only shifts the ticks position on the x-axis & the bars update and change position simultaniously.

Upvotes: 1

Views: 57

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The problem here is that you're reassigning sortIndex when clicking on the checkbox:

d3.select("#myCheckbox").on('change', function() {
    sortIndex = data.map( function(d) { return d.State} );
    update();
});

However, the very data it uses has been sorted!

The solution is simple, just remove that:

d3.select("#myCheckbox").on('change', update);

Besides that, make sure you're using the proper key function:

var barGroups = g.selectAll(".layer")
    .data(data, function(d){return d.State});

Here is the updated Plunker: https://plnkr.co/edit/goU5K7LB4Gj1jhynLqGt?p=preview

Upvotes: 2

Related Questions