CODEWITHSUNDEEP
javascriptd3.jscharts
rlcabral
rlcabral

Reputation: 1546

Update second chart on mouseover

I'm trying to replicate the trulia's graph with D3.js, but only the main chart (the heatmap) and the daily graph (the graph bar that changes when you hover the mouse over a specific point on the main chart).

Using this example, I've managed to build the main chart with my own data. I also have the second chart. But now I have no clue on how to update this second chart when I hover on a point on main chart.

Upvotes: 0

Views: 413

Answers (1)

ckersch
ckersch

Reputation: 7687

Essentially, what you're going to have is two different charts with different data. The first chart (the heatmap) controls the other one. Each data point on the heatmap has a day and an hour attribute, which we want to use to control the second graph. To do this, we can use two functions to control the second graph, and then call both of them every time someone clicks on a point.

The first function just needs to build a blank graph for the target day.

function updateGraphDay(newDay){
    //Remove current graph and build graph for newDay
}

The second is one that will highlight a certain hour on the bar chart. I'm assuming here that your bar chart is in its own SVG, barGraphSVG, and all of the bars have the class hourBar, and that the data you used to create it has an hour attribute, like the heat map data.

function updateGraphHour(newHour){
    barGraphSVG.selectAll('.hourBar')
        .classed('selectedBar', function(d){ return d.hour === newHour });
}

Now you just call both of these when you hover on one of the rect elements in the bar chart.

heatMap.on('hover', function(d){
    updateGraphDay(d.day);
    updateGraphHour(d.hour);
});

Upvotes: 2

Related Questions