CODEWITHSUNDEEP
d3.js
Hexatonic
Hexatonic

Reputation: 2417

How do you uses nested elements in a force directed D3 graph?

I had a look at Mike Bostocks lesson on nested elements here:

http://bost.ocks.org/mike/nest/

It's logical to use element nesting, but for some reason I cannot find any examples of nesting in force directed graphs. For example, why not nest text elements inside nodes so if you hover over a node, text will appear in response to the hover event. Without nesting you'd have to come up with some kind of mechanism to match the text element to the node element. Indeed, I see all kinds of strange variations of methods to do this rather then using nesting.

In short, can anyone provide an example of a force directed graph that uses nested elements?

Upvotes: 0

Views: 998

Answers (1)

jshanley
jshanley

Reputation: 9138

It's important to remember that a "node" is a completely abstract concept. You can use any kind of element, or whole groups of elements to represent a node.

One thing you might try is using g elements to represent your nodes, and using a translation to position them on each tick.

That way, upon a node entering, you can append any number of elements to it, and they will remain attached to that node. For example, you could attach a circle element and a text element, and then both elements will follow their parent g element around while the force layout is running.

Then you can simply use css to achieve the hover effect you want. For example, assuming you had g elements for nodes, each having a class of .node, you could show/hide the text upon hovering as follows:

.node text {
  opacity: 0;
}
.node:hover text {
  opacity: 1;
}

HERE is a very simple example you can follow to achieve the kind of labeled nodes that I think you are after, using the technique I described. Hope that helps.

Upvotes: 1

Related Questions