Link D3 force layout network diagram with table on mouseover

d3.js, force-layout, highlight

Solution

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.

Problem

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.

Original source