Search code examples
javascripthtmld3.jsgraphviz

Uncaught Type Error "this.node() is null" with graphviz/d3 and python http.server


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.

Error Message

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>

Solution

  • 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>