为什么不能将图形添加到动态插入的svg元素？

Question

我有一个简单的图，如下所示：

var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode(0, { label: "Zero"});
g.setNode(1, { label: "One"});
g.setEdge(0, 1, { label: "Edge"})

var render = new dagreD3.render();
var svg = d3.select("svg"),
    svgGroup = svg.append("g");
render(d3.select("svg g"), g);

.node rect {
  stroke: black;
  fill: white;
}

.edgePath path {
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>

<div id="svgwrapper">
    <svg id="svg-canvas" width=960 height=600></svg>
</div>

但是是否必须如上所述将svg元素硬编码到HTML代码中？我不能动态插入吗？

现在，我不知道d3和dagre的功能如何，但是据我了解，我不必这么做！这是因为当我这样称呼时：

var svgg = document.createElement('svg');
document.getElementById('svgwrapper').appendChild(svgg);
svgg.width = "960";
svgg.height = "600";
svgg.id = "svg-canvas";

以上代码完成执行后，（据我所知）svg元素将插入到文档中，并且与HTML代码中的硬编码元素相同...因此，从现在开始两种情况之间的任何后续执行的JS代码应该没有区别吗？

但事实并非如此。即使我在构造和（​​尝试）插入图形之前插入svg元素，但这仍然失败：

var svgg = document.createElement('svg');
document.getElementById('svgwrapper').appendChild(svgg);
svgg.width = "960";
svgg.height = "600";
svgg.id = "svg-canvas";

var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode(0, { label: "Zero"});
g.setNode(1, { label: "One"});
g.setEdge(0, 1, { label: "Edge"})

var render = new dagreD3.render();
var svg = d3.select("svg"),
    svgGroup = svg.append("g");
render(d3.select("svg g"), g);

.node rect {
  stroke: black;
  fill: white;
}

.edgePath path {
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>

<div id="svgwrapper">
</div>

我在做什么错？如何将图插入动态构造的svg元素中？