visjs
vis.parseDOTNetwork() doesn't handle default label of \N to mean use the node's name.
The vis.parseDOTNetwork() function does not take into account the default label of "\N" which means use the name/ID of the label instead. See GraphViz documentation for the label attribute for more.
This results in every node ending up with the label that is \N.
This is problematic because if the input DOT network is run through dot before being parsed it ends up with node [label="\N"];
System Details
Operating System Microsoft Windows 10 Version 22H2 (OS Build 19045.4170)
Browsers
- Mozilla Firefox 123.0.1 (64-Bit)
- Micorosoft Edge (Version 122.0.2365.80 (Official build) (64-bit))
Minimal code example
Example on JSBin can be seen here: https://jsbin.com/robupadela/1/edit?html,js,output
The example uses the version from GitHub as per your CodePen examples.
It can be switched to https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.9/standalone/umd/vis-network.min.js to be the old version.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Repo</title>
<script type="text/javascript"
src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<p>
Demonstration of the lack of support for a label with "\N" in DOT language parser.
This syntax means that the name/ID of the node should be used as the label.
See <a href="https://graphviz.org/docs/attrs/label/">label documentation</a>.
</p>
<div id="mynetwork"></div>
</body>
</html>
JavaScript
var container = document.getElementById("mynetwork");
var dot =
"dinetwork {node[label=\"\\N\"]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }";
var data = vis.parseDOTNetwork(dot);
var network = new vis.Network(container, data);
Work around
var parsed = vis.parseDOTNetwork(dotString);
parsed.nodes.forEach(element => {
// As per https://graphviz.org/docs/attrs/label/ a value of
// \N is meant to mean use the node's ID or name as the label.
if (element.label === "\\N")
{
element.label = element.id;
}
});
