d3-graphviz-with-requirejs-example-BROKEN-v2

d3-graphviz-with-requirejs-example-BROKEN-v2.html

<!-- importing require first for notebook environments that don't have it -->
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

<div id="graph" style="text-align: center;"></div>
<script>
// Using require since that way it should work with all notebook environments
require.config({
    'paths': {
        d3: '//d3js.org/d3.v5.min',
        'd3-interpolate': '//d3js.org/d3-interpolate.v2',
        'd3-selection': '//d3js.org/d3-selection.v2',
        'd3-dispatch': '//d3js.org/d3-dispatch.v2',
        'd3-ease': '//d3js.org/d3-ease.v2',
        'd3-transition': '//d3js.org/d3-transition.v2',
        'd3-timer': '//d3js.org/d3-timer.v2',
        'd3-drag': '//d3js.org/d3-drag.v2',
        'd3-zoom': '//d3js.org/d3-zoom.v2',
        'd3-color': '//d3js.org/d3-color.v2',
        'd3-path': '//d3js.org/d3-path.v2',
        'd3-format': '//d3js.org/d3-format.v2',
        "@hpcc-js/wasm": '//unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min',
        graphviz: '//unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz',
    },
});

/*
 * I believe require now knows that it should load graphviz after d3 (due to the config)
 * It should be able to modify the d3, however "d3.select(...).graphviz is not a function" will be thrown by this code.
 */
require(["d3", "graphviz"], function(d3, graphviz_module) {
    console.log(d3, graphviz_module)
    var dotIndex = 0;
    var graphviz_object = graphviz_module.graphviz(d3.select("#graph")) // The error will be thrown here.
        .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_object
            .renderDot(dot)
            .on("end", function () {
                dotIndex = (dotIndex + 1) % dots.length;
                render();
            });
    }

    var dots = [
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728"]',
            '    b [fillcolor="#1f77b4"]',
            '    a -> b',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728"]',
            '    c [fillcolor="#2ca02c"]',
            '    b [fillcolor="#1f77b4"]',
            '    a -> b',
            '    a -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728"]',
            '    b [fillcolor="#1f77b4"]',
            '    c [fillcolor="#2ca02c"]',
            '    a -> b',
            '    a -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728", shape="box"]',
            '    b [fillcolor="#1f77b4", shape="parallelogram"]',
            '    c [fillcolor="#2ca02c", shape="pentagon"]',
            '    a -> b',
            '    a -> c',
            '    b -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="yellow", shape="star"]',
            '    b [fillcolor="yellow", shape="star"]',
            '    c [fillcolor="yellow", shape="star"]',
            '    a -> b',
            '    a -> c',
            '    b -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728", shape="triangle"]',
            '    b [fillcolor="#1f77b4", shape="diamond"]',
            '    c [fillcolor="#2ca02c", shape="trapezium"]',
            '    a -> b',
            '    a -> c',
            '    b -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728", shape="box"]',
            '    b [fillcolor="#1f77b4", shape="parallelogram"]',
            '    c [fillcolor="#2ca02c", shape="pentagon"]',
            '    a -> b',
            '    a -> c',
            '    b -> c',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    a [fillcolor="#d62728"]',
            '    b [fillcolor="#1f77b4"]',
            '    c [fillcolor="#2ca02c"]',
            '    a -> b',
            '    a -> c',
            '    c -> b',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    b [fillcolor="#1f77b4"]',
            '    c [fillcolor="#2ca02c"]',
            '    c -> b',
            '}'
        ],
        [
            'digraph  {',
            '    node [style="filled"]',
            '    b [fillcolor="#1f77b4"]',
            '}'
        ],
    ];
});
</script>