graphviz/d3 和 python http.server 的未捕获类型错误 "this.node() is null"

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

我正在尝试使用 d3、graphviz 和 python http.server 的组合在浏览器中呈现一些 DOT 图。 Web 服务器运行良好,但任何试图呈现一个简单图形的尝试都会导致浏览器开发人员工具控制台出现错误,并且不会显示任何输出。我看到了 个关于 React 的类似问题,但网络开发并不是我真正的领域,所以我不知道如何将该解决方案转化为我的问题。

Error Message

index.html 文件:

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

好吧,为了后代,我不知道我到底做了什么来解决这个问题,但我怀疑它与 div id 有关。具体来说,我认为 div id 定义应该只是“graph”,而 d3.select 中的“#”是某种 prefix/modifier。例如

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