d3xx.jsvar 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 {"風が吹く" -> "桶屋が儲かる"}' ],
]d3.jsvar 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 {"風が吹く" -> "桶屋が儲かる"}' ],
]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 = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}