d3.jsconst digraph = ` digraph g {
// ノード左から右に向かって配置する
rankdir = LR;
ratio=auto;
overlap=false;
ranksep=1.1;d3.js // ノード（ボックス）の設定
node [fontsize = 12, shape = box];
edge [fontsize = 10];d3.js // メインテーマ（主題）を決める
MainThema[label="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2]d3.js // メインテーマから派生するキーワードを書く
MainThema -> "上位概念"[label="関係をここに書く"];d3.js // 更にキーワードから派生するキーワードを書く
"上位概念"->"下位概念"[label="被包括"];
// さらに派生したキーワードを繋げていくd3.js}
`
d3.select("#graph").graphviz()
.fade(false)
.renderDot(digraph);before.jsconst before = ` digraph g {
rankdir = LR;
ratio=auto;
overlap=false;
ranksep=1.1;
node [fontsize = 12, shape = box];
edge [fontsize = 10];
MainThema[label="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2]
MainThema -> "上位概念"[label="関係をここに書く"];
"上位概念"->"下位概念"[label="被包括"];
"上位概念"->"テスト";
}
`
d3.select("#graph").graphviz()
.fade(false)
.renderDot(before);after.jsconst after = ` digraph g {
rankdir = LR;
ratio=auto;
overlap=false;
ranksep=1.1;
node [fontsize = 12, shape = box];
edge [fontsize = 10];
MainThema[label="メインテーマ", fontsize = 12, style = filled, fillcolor = "pink", shape = ellipse, peripheries = 2]
MainThema -> "上位概念"[label="関係をここに書く"];
"上位概念"->"下位概念"[label="被包括"];
"上位概念"->"テスト";
"上位概念"->"テスト2";
"テスト"->"テスト2";
}
`
d3.select("#graph").graphviz()
.fade(false)
.renderDot(after);d3.css/* */