Graphviz:エッジの属性の指定
d3.css/* */d3.jsd3.select("#graph").graphviz()
.fade(false)
.renderDot(d3.js`
digraph G{
graph [label = "エッジの属性の指定"];
A -> B[label = label1];
A -> C[label = label2];
B -> D[label = label3,labelfloat = true];
C -> D[label = label4,labelfloat = true];
}
`d3.js );エッジのラベル（label、labelfloat）
ラベルは、かさならないように配置される。そのため線が曲がることがある
labelfloat=trueを指定すると、ラベルが重なることを認める。
エッジの始端のラベル（taillabel）
エッジの始端（矢印の根元）にもラベルが付けられる。
エッジの終端のラベル（headlabel）
エッジの終端（矢印の先）にもラベルが付けられる。
エッジの色（color）
colorは色の指定を行う
エッジのスタイル（style）
styleは線の種類を指定する
エッジの矢印の方向（dir）
dirは、双方向や方向性無しなどの矢印を指定する。
矢印の形（arrowtail、arrowhead）
arrwheadで矢印の先を変える
arrowtailで矢印の元を変える
矢印の大きさ（arrowsize）
arrowsizeで矢印の大きさを指定する。
vizScript.jsconst graph = `
digraph G{
graph [label = "エッジの属性の指定"];
A -> B[label = label1];
A -> C[label = label2];
B -> D[label = label3,labelfloat = true];
C -> D[label = label4,labelfloat = true];
}
`;
const viz = new Viz();
viz.renderSVGElement(graph)
.then(function(element) {
const editor = document.getElementById('editor');
editor.appendChild(element);
});