Home > Net >  How to make sense of id and title?
How to make sense of id and title?

Time:08-04

I would like to identify my nodes via Javascript and hence ensure that each element (graph, node, edge) has a unique ID. I found the https://github.com/magjac/d3-graphviz#maintaining-object-constancy section and thought that.keyMode('id') would tell d3-graphviz to use my IDs. But ids are still using the graph ID and don't seem to use the node ID. I found instead a title attribute from this example: https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f What is this attribute? Can I be sure that it is the ID I am looking for? What is the relationship in D3-graphviz between id and title?

EDIT I tried to dig and came up with this simple Example. I have this (autogenerated) input file:

digraph {
label=""
id="g1"
n1 [id="n1", label="First Node"]
n2 [id="n2", label="Second Node"]
n1 -> n2 [id="e1", arrowHead="normal", arrowTail="dot"]
}

I get this outcome:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="134pt" height="116pt" viewBox="0.00 0.00 133.59 116.00">
<g id="g1"  transform="translate(4,112) scale(1)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 129.59,-112 129.59,4 -4,4"></polygon>
<!-- n1 -->
<g id="n1" >
<title>n1</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-90" rx="52.16" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-85.8" font-family="Times,serif" font-size="14.00">First Node</text>
</g>
<!-- n2 -->
<g id="n2" >
<title>n2</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-18" rx="62.59" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-13.8" font-family="Times,serif" font-size="14.00">Second Node</text>
</g>
<!-- n1&#45;&gt;n2 -->
<g id="e1" >
<title>n1-&gt;n2</title>
<path fill="none" stroke="black" d="M62.8,-71.7C62.8,-63.98 62.8,-54.71 62.8,-46.11"></path>
<polygon fill="black" stroke="black" points="66.3,-46.1 62.8,-36.1 59.3,-46.1 66.3,-46.1"></polygon>
</g>
</g>
</svg>

but when I programmatically in an mouse event that provides me the <g> for a node, then I get the ID: svg-0.g1.n2 The last bit created the confusion. I need to find the attribute value, and not a connected value. But that will work. Thanks!

CodePudding user response:

The underlying Graphviz language provides an id attribute (https://www.graphviz.org/docs/attrs/id/). Based on the d3-graphviz consistency text, it looks like d3-graphviz will honor this id attribute.

  • Related