The problem is the way in which you're setting up the handler functions for the click events. You're selecting all the buttons and attaching a single handler that determines internally what to do. This handler runs code to update the bars for all buttons, regardless of what happened before.
In your particular case, this means that the sorting is done correctly and the corresponding transitions set up, but then immediately cancelled by the code that's updating the bars (to handle added/removed values). This doesn't do anything in this case, so the only effect is to cancel everything that the sort handler set up.
To fix, simply exit the function after the call to the sorting functions:
Complete demo here.
- D3 - Event binding inside another event
- How do you make an SVG element mouse event bubble up through another element?
- Why does event listener callback function only work inside function scope?
- How to access original event object when d3 event binding
- dc scatter plot binding onClick event
- Drag multiple items inside another item in d3
- Capturing the mouseover event of a shape blocked by another transparent shape
- How to pass an event from one element to another in d3?
- Bind dynamically created D3 elements with an event through another function call
- D3.js Dc.js Binding Event listener to axis tick label
- Add event listener of a method present in another js file
- How do I pass event variable/place a marker on the map - when binding done events in Datamaps & D3?
- d3v4 on change event real time binding data
- drag and drop a circle inside another circle with re size and auto adjust
- Making An HTML element inside a D3-Tip Trigger Click Event
- Binding an event during an update() transition
- D3 function called inside another function always returns undefined
- Using angular function binding inside .html() in d3
- binding d3 event in a class
- D3.js: randomly animate donut inside another donut
- d3 selection append element inside another
- D3 - Using one SVG click event to affect another
- append a element svg inside another svg in d3.js
- D3 how to call functions on event when inside a class?
- how to stop event propagation inside <table>?
- Function create graph in C3js don't show inside a event Meteor.js
- d3.js mouseover event not triggered when mouse is touching another element too
More Query from same tag
- Creating a custom d3 layout
- Highlighting nodes and its neighbors not working in sync with another opacity filter
- d3 - dashed line from a datapoint to an axis (seen in dimplejs.org)
- Latex mathematical equations in SVG elements
- d3.js - max and min value from json data which has array of values
- d3 drag fires event even when dx and dy is 0
- D3: ignore certain row in .csv
- D3 Draw Path with coordinate ML
- C3.js exclude columns from CSV
- D3 Sunburst. How to set different ring\level widths
- Creating single tooltip for multiple elements
- Create node cluster's focal points by data attribute in d3?
- Appending text to points in angular-nvd3
- HowTo select an Element by its ID (d3)
- Is there a way to convert CSV columns into hierarchical relationships?
- inline style stroke-width for axis makes bold tick labels
- d3 bubble chart with fisheye
- sdn4.0 set resultDataContents graph
- D3 - stack function bar chart filter
- Make the size of a chart adjust to its outer container
- D3: How to select every thing under svg element
- d3 pie chart underlapping not overlapping
- Trouble passing in additional parameters in function
- How to access stored data from d3 async calls in document.ready function to pass it to a function
- Adding a dynamic attribute name to a selection
- How to color LineString segments differently in Mapbox GL JS animations
- How to parse numeric type date in D3
- D3.js scaleOrdinal doesn't support rangeRoundBands method
- d3 arc transition error when toggling sweep-flag
- NVD3 - Using JSON url data with LinePlusBarChart (mapping values)