Highlight the related table entry when hovering over a slice of the donut chart in D3

Question

Highlight the related table entry when hovering over a slice of the donut chart in D3

Yesterday, I received some help to get my D3 code working with a donut chart. However, I have one quick question. The donut chart represents a JSON object and when you hover over certain parts of the chart, they animate and pop out. There's also a table that displays the same data. I managed to map the table entries so that hovering over them animates the corresponding pie chart slice. But now, I'm trying to do it the other way around - when you hover over the donut slice, it should highlight the table entry.

Currently, I've got it highlighting the entire table, but I'm struggling to map it to the correct individual table entry.

Here's a fiddle for context

This is my current arc mouseover function:

.on("mouseover", function(d) {
                    d3.select(this).select("path").transition()
                        .duration(100)
                        .attr("d", arcOver);
                    var path = paths[0][i];
    
                      d3.selectAll("#testtable .dataRow")
                        .style("background-color","red");

If anyone could offer some guidance on how to correctly map to the table entry, I would greatly appreciate it!

Thank you!

javascript jquery html css d3.js

Answer 1

Answer №1

To highlight both the pie chart and table simultaneously, you can use the index to achieve this:

.on("mouseover", function(d,i) {
    d3.select(this).select("path").transition()
        .duration(200)
        .attr("d", arcOver);
    var rowElement = d3.selectAll("#mytable .row")[0][i]; // i represents the index
    d3.select(rowElement)
        .style("background-color","blue");  
})

Check out the updated example.

Answer 2

To highlight both the pie chart and table simultaneously, you can use the index to achieve this:

.on("mouseover", function(d,i) {
    d3.select(this).select("path").transition()
        .duration(200)
        .attr("d", arcOver);
    var rowElement = d3.selectAll("#mytable .row")[0][i]; // i represents the index
    d3.select(rowElement)
        .style("background-color","blue");  
})

Check out the updated example.

Highlight the related table entry when hovering over a slice of the donut chart in D3

Answer №1

Similar questions

How can I retrieve array responses for multiple HTML elements using a single AJAX call in PHP with Ajax post?

Blend a background image using rgba without incorporating a gradient effect

Error: The method 'editable' is not defined for the jQuery.jEditable object [object Object]

Removing a post in Meteor-React using a submission modal is not possible as the post is not defined

Running unit tests on the interceptor using axios results in an error

Data that is loaded asynchronously will not display rendered

Switch between classes when hovering over / exiting ngFor elements

Create a variable called `myUInt8Array` of type `UInt

Cease the act of sending submissions through JavaScript ajax requests

Transform the JSON response from MongoDB into a formatted string

JavaScript Function Failing to Produce Output

Using ajax to access the Wunderlist API and retrieve a list of tasks

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

Error in Background Image Validation for WCAG 2.0 AA Compliance

Understanding the Usage of FormData in NextJS

What is the process for implementing a version folder for my @types/definition?

How can I choose a specific node within another node using selenium and xpath?

"Yakov's slender typefaces are appearing incorrectly on the screen

Vue looping through nested checkbox groups

How can I use nodejs to retrieve all data fields from a table except for one specific field?