D3.js Linking multi-line chart to bar chart on mouse
I am trying to link interactions on a bar chart with linked data in a line chart using d3.js. Now I'm working on hovering over the line associated with it, but I'm having trouble getting to work (i.e. hovering over a strip to highlight the corresponding line).
I'm a relatively newbie, but I'm guessing it has something to do with how I'm trying to access the underlying data in a line chart to identify a match.
I've searched for answers on stackoverflow and elsewhere, but can't figure out what I'm missing. Suggestions?
And here is a code snippet for hovering over a histogram that doesn't work.
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 is useful for questions like mine: clicking a node in d3 with a button outside the svg
source to share
Hope below code will work for you. Do not substitute the code mouseover
inbarChart
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 the code is the name of the selected region and do not forget to remove it mouseout
frombarChart
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 this mouse button
linechart.selectAll("line")
.classed("pathLight", function(d) {
if ( d.state == activeState) return true;
else return false;
});
If it doesn't work, ask me for more.
source to share