Link D3 force layout network diagram with table on mouseover - d3.js

Question

I took Michael Bostock's forced network example of a molecule, http://bl.ocks.org/mbostock/3037015
I added a table of the data following the example in http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html.
I added separate mouseover events to the network and the table. If I mouseover a node in the diagram, the selected node is highlighted in orange.
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.on("mouseover", function() {
d3.select(this).select("circle").style("stroke-width", 6 );
d3.select(this).select("circle").style("stroke", "orange");
d3.select(this).select("text").style("font", "20px sans-serif");
})
.on("mouseout", function() {
d3.select(this).select("circle").style("stroke-width", 1.5);
d3.select(this).select("circle").style("stroke", "gray" );
d3.select(this).select("text").style("font", "12px sans-serif");
})
.call(force.drag)
;
And if I mouseover a row in the table, the selected row is highlighted in orange.
var rows = tbody.selectAll("tr")
.data(data)
.enter().append("tr")
.on('mouseover', function(){d3.select(this).style('background-color', 'orange');})
.on('mouseout', function(){d3.select(this).style('background-color', 'white');})
;
I would like to link the mouseover highlighting of the diagram and the table such that:
If I mouse over a node in the diagram, the selected node and its corresponding row in the table are both highlighted.
If I mouse over a row in the table, the selected row and its corresponding node in the diagram are both highlighted.
I haven't been able to find an example of a mouseover-linked diagram and table in D3. Can you point me to one? Or suggest a solution?
I am using local copies of D3 (d3.v3.js) and the data (graph.json) and viewing the diagrams on Firefox 20.0.1 for Windows.
Thanks for your help.

Answer 1

A simple way to do this is to use dom element classes, selections and the data objects that your mouse events will have. Have a look at a working demo here
The pertinent parts:
I am linking the rectangles to the circles based on a join between "class" and "cat" in their two respective datasets. To get at the elements quickly I will incorporate those items into the class attribute:
var table = svg.selectAll('rect').data(data).enter().append('rect');
table.attr(...)
.attr('class', function(d) { return d["class"];} );
You can attach a class to any element, also you can attach more than one class to each element (it is considered a space-delimited list)
I do the same for each circle. Now in the circle mouseover I add:
balls.on("mouseover", function(d) {
d3.select(this).attr("fill","#ffeeee");
d3.selectAll("rect." + d.cat)
.attr('stroke','red')
.attr('stroke-width', 3);
})
D3 passes the data object of the moused-over element, so I grab it's "cat" and use that with a D3 selector on rect's with that class. Like jQuery "rect.A" will select all "rect" elements with class "A"
For a different approach that uses brushes and selects ranges more than elements you can also check out crossfilter whose landing page has a great full example.