tmatz/vis.jsでdotスクリプトを表示する.md

## vis.jsでdotスクリプトを表示する.md

      
    Raw
  

              vis.jsでdotスクリプトを表示する.md
            
          
    vis.js を使って graphvis の dot スクリプトを表示する方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.css" />
</head>
<body>
<script type="application/dot" id="dot">
graph {
A [shape = box, label = "テスト"];
D [shape = triangle];
C [shape = ellipse];
B [shape = circle];
F [shape = star];
E [shape = square];
A -> B;
B -> C;
C -> D;
E -- F;
A -> F;
X -> Y;
Z -> W;
}
</script>
<div id="network" style='height:400px;background-color:#ff0000;';></div>
<script type="text/javascript">
var dotScript = document.getElementById('dot').innerHTML;
var parsedData = vis.network.convertDot(dotScript);
var nodes = parsedData.nodes;
// ノードの位置をなるべく固定する
for (var i = 0; i < nodes.length; ++i)
{
  parsedData.nodes[i].x = i * 100;
  parsedData.nodes[i].y = i;
}
var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
};
var options = parsedData.options;
//options.layout = { randomSeed : 2 };
var container = document.getElementById('network');
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

ノードの形は graphviz と vis.js で対応いていない。vis.js の表現で解釈されるので dot スクリプトの書き換えが必要。
矢印の形は変更できない。