Graphviz:グラフ全体の属性の指定
Graphvizには、属性があり、その値を変えることで、見た目を変えることができる。
ここではグラフ全体の属性を変更する。
code:d3.css
/* */
code:d3.js
d3.select("#graph").graphviz()
.fade(false)
.renderDot(
code:d3.js
`
digraph G{
graph label = "Graph表示テスト", fontsize = 18,fontcolor = red;
graph bgcolor = "#99FFCC", rankdir = LR;
A -> B;
}
`
code:d3.js
);
実行
graphというキーワードで、中に属性を与えていく
labelはグラフの名前を指定
fontsizeはフォントのサイズを指定
fontcolorはフォントの色を指定
bgcolorは背景色をつける
rankdir を「LR」に指定すると、グラフを左から右に出力する
code:vizScript.js
const graph = `
digraph G{
graph label = "Graph表示テスト", fontsize = 18,fontcolor = red;
graph bgcolor = "#99FFCC", rankdir = LR;
A -> B;
}
`;
const viz = new Viz();
viz.renderSVGElement(graph)
.then(function(element) {
const editor = document.getElementById('editor');
editor.appendChild(element);
});
viz-script-button.icon （実行ボタン）
Graphviz:グラフ
#Graphviz