Search code examples
javascripthtmld3.jsgraphviz

d3-graphviz basic example won't render

I'm trying to use d3-graphviz in a very basic html page to render a graph for display. However, nothing ever renders. I worked my example down to the exact content of the "basic example" from the documentation and still nothing renders. Here is my page content which is exactly the same as https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b which is referenced from https://github.com/magjac/d3-graphviz

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .renderDot('digraph  {a -> b}');

</script>

If I load that file (chrome, firefox, or safari) then I just get a blank page. I can throw in HTML above the <div> which renders, but the graph doesn't render. Any ideas what I'm doing wrong?

Solution

  • This code runs if I set up a local web server and access it. To do the same, you'll need to set up a web server.

    Example