2

I am working on a force directed graph using D3 and I am showing all the nodes displayed in the graph in a separate table beside the graph area. I have checkboxes in the table that I am displaying which gives me the option of selectiong the nodes.

I am trying to highlight the nodes and the relations between them. I have been taking pointers from this example Highlight selected node, its links, and its children in a D3 force directed graph. This example is for one particular node and its children but I am trying to highlight more than one nodes if they have any relation between them.

Any help on this will be really useful.

Community
  • 1
  • 1
Rahul Rout
  • 1,323
  • 2
  • 14
  • 15
  • Did you see my answer regarding [how to select related elements](http://stackoverflow.com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391)? – mbostock Jun 29 '12 at 15:02
  • Finally figured it out......thanks a lot @mbostock – Rahul Rout Jul 04 '12 at 14:28

1 Answers1

1

I'm not using a force directed graph but rather a "Radial Hub and Spoke Diagram" (a.k.a. a "Radial Wheel") but the premise should be the same. In my example, the relationships are represented by the pie arcs and the nodes in the relationships are at either end of the arcs. In the example, you'll see how I select specific nodes and/or relationships (i.e. mousing over any arc or node name) or many nodes and relationships, simultaneously, based on types (mousing over the Color Coded Type Key).

In either selection example, it comes down to assigning unique identifiers to each element in the drawing. You can see how I do this by searching for .attr("class"...) and .attr("id"...) statements. Once you've assigned such unique identifiers, you can then use them to create selection combinations. You can see how I perform such selections in the .on("mouseover", ...) functions.

BTW, could you please post your example to bl.ocks.org? It would be easier to help you if we can see at your code.

I hope this helps.

My Best,

Frank

Information Technology
  • 2,243
  • 3
  • 30
  • 46