Custom Force-Directed Graph nodes

[Daniel]

Hi everybody,

I'm trying to use the Force-Directed Graph support on D3 to display
nodes that represent machines and services (working on a real-time
nagios clone here that will be posted on GitHub once done).

Anyways, what I had in mind is to use the graph visualization to
represent servers and their services (as well as relationship between
servers), but I'm still trying to understand how D3 works. So what I
wanted to ask is: how does one use custom glyphs for nodes (instead of
just circles) ? Is it possible to show a text label inside a box
instead (or even a bigger circle with some text inside) and have the
circle and text change colors once there's a problem on a node/
service ?

If anyone can guide me through the documentation so I can understand
how to do this, it would help a lot =)


Thanks!
Daniel

[Mike Bostock]

Here's an example from an earlier thread, using images and a text
label for the nodes:

http://bl.ocks.org/950642

The main thing is that you add an svg:g element, rather than an
svg:circle element. This is a bit like a DIV in HTML—you can then put
whatever you want inside of it.

Mike

[mhermans]

On 30 jun, 07:57, Mike Bostock <mbost...@cs.stanford.edu> wrote:
> Here's an example from an earlier thread, using images and a text
> label for the nodes:
>
>  http://bl.ocks.org/950642
>

Is there an example available on how you can assign different images
to nodes, based on a node-property in the JSON graph-file?

I gather (very new to D3.js) I need to select nodes on attribute
using .selectAll() and then apply the image to that subset
using .append("svg:image"). But I do not immediately see how to select
on a attribute in the data; or should I split the data and create
different sets using .data(json.nodes.set1)?

Thanks,

Maarten

[Mike Bostock]

> Is there an example available on how you can assign different images
> to nodes, based on a node-property in the JSON graph-file?

You could define the xlink:href attribute as a function, and return
different URLs based on the associated data.

Mike