Add custom attribute to a dot SVG edge using jQuery

Question

I am working on the generation of interactive graphs. So far, I have started with a dot graph that I generate SVG from.

I'd like to add custom classes to the edge so that it would be easier for me to dynamically add some information with a script.

So far, I have only found a way to add a custom identifier. Is there any way to add also a custom class?

Actually since I'm going to use jQuery to select attributes it would be enough to be able to add a custom attribute to the edge element.

Carothers

Answer 1

The dot guide recommends using the comment field for custom data. Alternatively you could use the URL field.

Holsinger

I don't think this works. I tried this and the comment field in the dot script does not appear as an attribute in the edge element when an SVG is generated from it (using the -Tsvg option). Do you have any idea of how the comment field can be included as an atribute in the SVG edge elements? I'm struggling with the same issue... – Gipon

comment field is wrong, class-attribute is correct. – Gules

Quite possible, somebody ought to change the accepted answer in that case! – Holsinger

Answer 2

Yes, class="" is the correct answer. Comment field is wrong.

In the following example you can see how to define a class for an edge (foo), for a node (bar) or even a subgraph (sub-foobar). And it does goes even better. Every entity type are also a class, so you can for e.g. hide all cluster or all edges.

digraph simple {
    c [class="bar"]

    a -> b [class="foo"]
    c -> b

    subgraph cluster_0 {
        class="sub-foobar";
            d
            e        
    }
}

Gules

Answer 3

You can just specify class attribute. E.g.

digraph ab {
  a -> b [class="foo"]
}

Photofluorography

According to the official graphviz specification there is no class-attribute. – Ursel

Now, however, the class attribute is defined - graphviz.org/docs/attrs/class – Cerargyrite