Binding events within other events can be achieved using D3

Question

Binding events within other events can be achieved using D3

Trying to implement code from Scott Murray's book "Interactive Data Visualization for the Web" to create versatile bar graphs. Though the code successfully generates and updates graphs, it seems that the sorting functionality is not functioning as expected. Despite confirming that the sort function works by adding a click event to trigger it when individual bars are clicked, the overall sorting functionality remains elusive.

To view the issue in action, check out the JSFiddle link provided - http://jsfiddle.net/kiniadit/k812fo53/3/

Specifically, the problematic code segment can be found in lines 74-77:

else if(btnClass == "sort"){
    sortBars();
    sortLabels();
}

javascript d3.js

Answer 1

Answer №1

The issue lies in how you are implementing the event handler functions for the click events. Instead of individually assigning handlers to each button, you have a single handler that handles all buttons and their actions internally. This leads to updating all bars regardless of previous actions.

In your specific scenario, this results in correct sorting and transition setup being overridden by code that updates the bars for added or removed values. This essentially nullifies all the work done by the sort handler.

To resolve this, simply add a return statement after calling the sorting functions:

return;

For a complete demonstration, visit this link.

Answer 2

The issue lies in how you are implementing the event handler functions for the click events. Instead of individually assigning handlers to each button, you have a single handler that handles all buttons and their actions internally. This leads to updating all bars regardless of previous actions.

In your specific scenario, this results in correct sorting and transition setup being overridden by code that updates the bars for added or removed values. This essentially nullifies all the work done by the sort handler.

To resolve this, simply add a return statement after calling the sorting functions:

return;

For a complete demonstration, visit this link.

Binding events within other events can be achieved using D3

Answer №1

Similar questions

Constantly showing blank white pages on my website specifically in Internet Explorer 11

How can we ensure that the previous selection is cleared in jQgrid only if the checkbox is not clicked

What methods can you use to locate the CSS selector within HTML that meets certain criteria?

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Unable to assign a value to a null property during the onchange event

Vue - when multiple parents share a common child component

What is the best way to retrieve multiple image file names using JavaScript?

Steps for creating a herringbone design on an HTML canvas

Ensure a field is required if the integer field is not empty in Angular Schema Form

Error in Safari Browser: Unexpected token ':' found in AngularJS syntax

The execution of my code differs between running it locally and in online code editors like CodePen or Plunker

Tips for adjusting the size of an imported item in Three.js?

Discovering whether the incoming request to an AngularJS application is a GET or POST request can be efficiently accomplished

I am looking to add some flair to my ID "checkimg" using JavaScript

Eliminate server-side functionality from the React project's boilerplate template

Prevent the next ajax request from overwriting the parameter value set in the previous request

Discover identical JSON elements in 2 JSON arrays using JavaScript and add CSS styles to the corresponding items within a UL list

blur event triggered on a cell within a table

Utilize JavaScript and jQuery to extract the selected text's context from a webpage

Retrieve JSON data within a service and provide it to a component