d3.js Linking multi-line chart with bar chart on mouseover

Question

I'm trying to link interactions on a bar chart with related data in a line chart using d3.js. I have it working now so hovering over a line highlights the associated bar, but am having trouble getting the reverse to work (i.e. hovering over a bar to highlight the related line).

I am relatively new at this, but I'm guessing it has something to do with how I'm trying to access the underlying data in the line chart to identify a match.

I've searched through stackoverflow answers and elsewhere but can't figure out what I am missing. Suggestions?

The code on bl.ocks.org

And here's the code snippet for the bar chart mouseover that's not working.

        barchart.selectAll("rect")

                    .on("mouseover", function(d) {

                    activeState = d.state;

                    linechart.selectAll("line")
                    .classed("pathLight", function(d) {
                        if ( d.state  == activeState) return true;
                        else return false;
                        });

                    console.log(activeState);
                })

                .on("mouseout", function() {

                    d3.selectAll("path")
                    .attr("class", "pathBase");

            });

Edit: Found another answer that it is helpful for questions like mine: clicking a node in d3 from a button outside the svg

saikiran.vsk · Accepted Answer · 2015-05-12T07:08:17.800

Hope below code will work for you. Keep below code in mouseover of barChart

linechart.selectAll("g")
.each(function(d) {
  if(d){
    if ( d.state == activeState){
      console.log(d3.select(this).select("path"));
      d3.select(this).select("path").classed("pathLight", true);
      return true;
    }
    else{
     return false;
   }
 }
});

//Below Code is to show the highlighted region name, and don't forget to remove this in mouseout of barChart

var xPosition = xLabel + 8;

var yPosition = h/2; 

linechart.append("text")
.attr("id", "hoverLabel")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "start")
.attr("font-family", "ff-nuvo-sc-web-pro-1,ff-nuvo-sc-web-pro-2, sans-serif")
.attr("font-size", "14px")
.text( activeState);

remove below code from that mouseouver

linechart.selectAll("line")
.classed("pathLight", function(d) {
  if ( d.state == activeState) return true;
  else return false;
});

If it's not working ask me, for more.

Thanks @saikiran That works. Not sure I understand all the reasons why (like what the nested `if` statement is doing), so I think I'll also try some of the solutions suggested in the other recommended link. — threestory, May 12 '15 at 18:51

d3.js Linking multi-line chart with bar chart on mouseover

1 Answers1