Graphviz:因果関係図を作ってみよう2
Graphviz:因果関係図を作ってみよう のアニメーション版
実行
データ部
code:d3xx.js
var dots = [
'digraph Causal_diagram {"風が吹く"}' ,
'digraph Causal_diagram {"風が吹く"->"土ぼこりがたって目に入り盲人が増える"}' ,
'digraph Causal_diagram {"土ぼこりがたって目に入り盲人が増える"->"盲人は三味線で生計を立てようとする"}' ,
'digraph Causal_diagram {"盲人は三味線で生計を立てようとする"->"三味線の胴を張る猫の皮の需要が増える"}' ,
'digraph Causal_diagram {"三味線の胴を張る猫の皮の需要が増える"->"猫が減るとねずみが増える"}' ,
'digraph Causal_diagram {"猫が減るとねずみが増える"->"ねずみが桶をかじる"}' ,
'digraph Causal_diagram {"ねずみが桶をかじる"->"桶屋が儲かる"}' ,
'digraph Causal_diagram {"桶屋が儲かる"}' ,
'digraph Causal_diagram {"風が吹く" -> "桶屋が儲かる"}' ,
]
code:d3.js
var dots = [
'digraph Causal_diagram {"風が吹く"}' ,
'digraph Causal_diagram {"風が吹く"->"土ぼこりがたって目に入り盲人が増える"}' ,
'digraph Causal_diagram {"風が吹く"->"土ぼこりがたって目に入り盲人が増える"->"盲人は三味線で生計を立てようとする"}' ,
'digraph Causal_diagram {"土ぼこりがたって目に入り盲人が増える"->"盲人は三味線で生計を立てようとする"->"三味線の胴を張る猫の皮の需要が増える"}' ,
'digraph Causal_diagram {"盲人は三味線で生計を立てようとする"->"三味線の胴を張る猫の皮の需要が増える"->"猫が減るとねずみが増える"}' ,
'digraph Causal_diagram {"三味線の胴を張る猫の皮の需要が増える"->"猫が減るとねずみが増える"->"ねずみが桶をかじる"}' ,
'digraph Causal_diagram {"猫が減るとねずみが増える"->"ねずみが桶をかじる"->"桶屋が儲かる"}' ,
'digraph Causal_diagram {"ねずみが桶をかじる"->"桶屋が儲かる"}' ,
'digraph Causal_diagram {"桶屋が儲かる"}' ,
'digraph Causal_diagram {"風が吹く" -> "桶屋が儲かる"}' ,
]
コード部
code:d3.js
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render)
function render() {
var dotLines = dotsdotIndex;
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
因果関係図
元ネタ
d3-graphvizを使ってブラウザ上にフローチャート図を表示しよう - はるなぴログ
#Graphviz