I'm trying to render some DOT graphs in the browser using a combination of d3, graphviz, and python http.server. The web server runs fine but any attempt to render even a simple graph results in an error in the browser developer tools console and no output displayed. I saw this similar question regarding react, but web dev isn't really my field so I don't know how to translate that solution to my problem.
The index.html file:
<!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>
Okay so for posterity, I don't know exactly what I did to fix this but I suspect it has to do with the div id. Specifically I think that the div id definition should just be "graph" and the "#" in d3.select is some sort of prefix/modifier. E.g.
<!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>