Question

I’m using D3 to display multiple bar charts (30+ charts) similar to the example here: http://phrogz.net/js/d3-playground/#MultiBars_HTML As the user hovers over a bar I want to change the title of just the chart the user is interacting with, with information about the value the user is hovering over.

So if I add something like:

bars.on('mouseover', mouseoverfunc);

function mouseoverfunc(d, i) {
// update the title just for this chart..not all charts
a.select("h2").text(function (d) { return "hello"; });
}

So knowing the mouseover is on the bar [d3.select(this)], how do I select the parent so I can change just the title of one chart? There is a very similar example here: http://mbostock.github.com/protovis/ex/minnesota.html that I’m trying to replicate in D3

Thanks.

Answer 1

The easiest way is probably to assign an attribute to your title divs that let you find them with a select statement, something like:

d3.select("[parentBarChartID="+d.id+"]")

in your mouseoverfunc.

Alternatively, you couldmake your DOM elements hierarchical such that you can traverse using this.parentNode.childNodes, looping over all children until you find the title node (see how to loop over child nodes here.