Skip to content

Styled edges in DOT file don't show up with pyvis but do work with vis network. #128

@tuschla

Description

@tuschla

I'm having an issue with the styling of my edges in a DOT not being represented when visualizing the graph with pyvis.
I am just reading the DOT with the from_DOT method but the edges with styling [style="dotted"] or [style="dashed"] have the same appearance as the other (solid) edges.

Of course I tried adding each edge to the graph with add_edge and then do the styling with something like dashes=1 for dashed edges and dashes=[1, 6] for dotted edges but that's not really the most elegant solution considering the from_DOT method already exists and the edge styling works just fine with my DOT files when I play around with vis network.

DOT file:

digraph {
    a [label=12, entity_id=12, entity_class="truck"];
    b [label=7, entity_id=7,entity_class="bike"];
    c [label=3, entity_id=3, entity_class="car"];
    a -> b[label="solid edge"];                     
    a -> b [label="dashed edge", style=dashed]; 
    a -> c [label="dashed edge", style=dashed]; 
    a -> c [label="dotted edge", style=dotted];      
}

This is what I get with pyvis:

Here is the relevant generated js code:

Details
    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;
    
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph() {
        var container = document.getElementById('mynetwork');

        var DOTstring = "digraph simple_graph {     a [label=12, entity_id=12, entity_class=\"truck\"];     b [label=7, entity_id=7,entity_class=\"bike\"];     c [label=3, entity_id=3, entity_class=\"car\"];     a -> b[label=\"solid edge\"];                          a -> b [label=\"dashed edge\", style=dashed];      a -> c [label=\"dashed edge\", style=dashed];      a -> c [label=\"dotted edge\", style=dotted];       }";
        var parsedData = vis.network.convertDot(DOTstring);
        
        data = {
          nodes: parsedData.nodes,
          edges: parsedData.edges
        }
        
        var options = parsedData.options;
        options.nodes = {
            shape: "dot"
        }
        
        network = new vis.Network(container, data, options);

        return network;
    }

    drawGraph();

And this is what vis network draws:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions