0

我有一个简单的图表如下：

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元素中？

4

0 回答 0