Graphviz:エッジの属性の指定

code:d3.css

/* */

code:d3.js

d3.select("#graph").graphviz()

.fade(false)

.renderDot(

code:d3.js

`

digraph G{

}

`

code:d3.js

);

エッジのラベル（label、labelfloat）

ラベルは、かさならないように配置される。そのため線が曲がることがある

labelfloat=trueを指定すると、ラベルが重なることを認める。

エッジの始端のラベル（taillabel）

エッジの始端（矢印の根元）にもラベルが付けられる。

エッジの終端のラベル（headlabel）

エッジの終端（矢印の先）にもラベルが付けられる。

エッジの色（color）

colorは色の指定を行う

エッジのスタイル（style）

dirは、双方向や方向性無しなどの矢印を指定する。

矢印の形（arrowtail、arrowhead）

arrwheadで矢印の先を変える

arrowtailで矢印の元を変える

矢印の大きさ（arrowsize）

arrowsizeで矢印の大きさを指定する。

code:vizScript.js

const graph = `

digraph G{

}

`;

const viz = new Viz();

viz.renderSVGElement(graph)

.then(function(element) {

const editor = document.getElementById('editor');

editor.appendChild(element);

});