Detecting click events in D3 for multiple SVG elements within a single webpage

Question

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a different SVG. When attempting to add click events to this setup, they do not trigger.

I also experimented with tracking mouse positions, but this only worked for the SVG appended to the body as well.

Is there a method to assign click listeners to the rect elements inside the "floating" div?

You can view the fiddle here: JsFiddle

The challenge is to toggle the color between black and white when clicking on a rect element at the top of the page. How can this be achieved?

I also attempted to use jQuery for a solution...

It's worth noting that hovering over the second SVG allows you to drag and zoom in on the first one, which is not the desired behavior.

javascript jquery css d3.js svg

Answer 1

Answer №1

An updated and improved JsFiddle has been created to showcase the use of class toggling for achieving a desired effect. Check out the following Javascript snippet:

d3.selectAll(".controlBarButton")
    .classed("highlight", function(d, i) { return data[i] === "none"; })
    .on("click", function() {
        d3.select(this).classed("highlight", !d3.select(this).classed("highlight"));
    });

In addition, previous style settings that set elements to white on lines 68 and 79 have been commented out. CSS rules have been added to handle black and white fills based on toggling of the highlight class. The css rule pointer-events: none which previously blocked mouse events on the control bar has also been removed for better functionality.

Answer 2

An updated and improved JsFiddle has been created to showcase the use of class toggling for achieving a desired effect. Check out the following Javascript snippet:

d3.selectAll(".controlBarButton")
    .classed("highlight", function(d, i) { return data[i] === "none"; })
    .on("click", function() {
        d3.select(this).classed("highlight", !d3.select(this).classed("highlight"));
    });

In addition, previous style settings that set elements to white on lines 68 and 79 have been commented out. CSS rules have been added to handle black and white fills based on toggling of the highlight class. The css rule pointer-events: none which previously blocked mouse events on the control bar has also been removed for better functionality.

Detecting click events in D3 for multiple SVG elements within a single webpage

Answer №1

Similar questions

Wrap the words around to fit a rectangle with a specific ratio, rather than a specific size

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

Bringing the Jquery cursor into focus following the addition of an emoji

Creating a Duplicate of the Higher Lower Challenge Game

MUI Alert: Encountered an Uncaught TypeError - Unable to access properties of undefined when trying to read 'light' value

Failed to perform the action using the Angular Post method

Fetching the "User ID" variable from localStorage to PHP with angularjs - a quick guide

Provide details on the final parameters

Applying scoped CSS styles to parent elements in HTML5

having difficulty deleting text from autocomplete field

How can I enable the assignment of values to $.myPlugin.defaults.key in plugin development?

Generating a JSON array from a C# collection can be achieved by utilizing the System.Web.Script.Serialization

Choose a value to apply to the dropdown menus

Extract the content from the span element on Whatsapp Web

Accessing React Context globally using the useContext hook

Converting a table into div elements and subsequently reverting it back to its original table format

Creating a dynamic hyperlink variable that updates based on user input

Steps to place a URL and Buttons over an existing header Image

Transforming the text to be "unreadable"

Knockout Mapping is causing a complete re-render of all elements