Getting coordinates of nodes from dot

1

Hello,

what is the best way to get the coordinates of nodes / clusters …?

Presently I generate gif files for visualisation of a tree in a java app. But it
would be a nice thing to click to a node at the graphics and then bring
up a pop-up box with some node details. Therefore I need to know where on
the graphics is what node.

Thanks for your feedback

Peter

2 Likes
2

If you produce your graphs with output format=dot (-Tdot),each node and cluster will include bb (bounding box) or pos (position) attributes. See bb | Graphviz and pos | Graphviz. Note that there is also the toottip attribute (tooltip | Graphviz)

3

If you want more detailed graphical information, the complete graphical details are provided in both the xdot and json output formats via the _draw_, _ldraw_, _hdraw_, _ldraw_, etc. attributes. You don’t need to run the layout twice; you can just run something like

dot in.gv -Txdot -o out.gv -Tgif -o out.gif

For the record, if your output is going to be viewed in a browser, you might be able to get away with an image map output.

4

Hello, thanks for your replies.

I created json output which is fine for me to parse.

But now I have a problem to understand the scaling. According this side https://graphviz.org/faq/#FaqCoordTransformation I calculated:

Json output:

{
  "name": "G",
  "directed": true,
  "strict": false,
  "bb": "0,0,561.97,415.5",
  "bgcolor": "transparent",
  "compound": "true",
  "dpi": "96",

My calc is as follows:

1/72 = 0,0138888888888889
at 96 DIP: 0,0138888888888889*96 = 1,33333333333333

x: 561.97*1,3333 = 749
y: 415.5 * 1,333 = 554

But the image has 760x565

So it is close but not the same.

What is my error?

Thanks,
Peter

5

The difference is due to the pad attribute. This extends the drawing on each side, so the drawing elements don’t abut the edge of the drawing. By default, padding adds a 4 point frame around the drawing. In your case, this gives

x: (561.97+8)*1.333 = 759.77
y: (415.5+8)*1.333 = 564.5255

which fits with your 760.565.

I guess this should be viewed as a bug, since the xdot/json output does not accurately reflect the actual image created. (There is also the “margin” attribute, which can affect the relevant computations. Technically, the margin is not part of the drawing, but it does affect the bitmap output.) These discrepancies occur in the code because the pad and margin attributes are handled when actually producing graphical output, whereas text output is produced by a separate code path.

6

Hello Erg,

thank you for the explanation. Clear now!

Peter

7

One additional question:

In my dot code I include PNGs which contains a sub-part of my digraph.

I get this message:
Warning: No loadimage plugin for “png:json”
Warning: No loadimage plugin for “png:json”

Looks like that json output does not consider the image sizes of the included images. And thereof the coordinates of elements containing the image are wrong. Anything I can do?

Peter

8

This can probably be remedied by creating a loadimage plugin for png in json using one of the png loaders. You would probably need to submit an MR requesting this feature.

9

Hi Peter,

Sorry for waking up the old thread.

I am currently working on the identical problem to make nodes interactive with a pop-up box on a click/hover.

If you managed to implement that, I was wondering, if you could share some parts of the code which do the determination of node boundaries, etc., so I don’t struggle to reinvent the wheel?

It would be very helpful

cheers,
Bohdan

10

Doesn’t this kind of hit detection come for free with SVG?

In Olden Tymes people combined click maps with images - in fact graphviz still supports -Tcmap and a couple of variants of that.