Почему я не могу добавить график к динамически вставленному элементу svg?

У меня есть упрощенный график следующим образом:

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?


javascript d3.js appendchild dagre-d3
person Community    schedule 27.11.2018    source источник
comment
Вам необходимо использовать document.createElementNS() для пространства имен SVG. См. раздел Добавление элемента SVG к существующему SVG с помощью DOM. В качестве альтернативы, используя D3, вы можете сделать d3.select("svgwrapper").append("svg"), так как это автоматически позаботится о пространстве имен.   -  person altocumulus    schedule 28.11.2018
comment
@altocumulus Спасибо! ... ... Когда я это делаю, наконец-то появляется график! (... ... хотя SVG отказывается иметь заданную высоту. Проблема достойна другого вопроса, хотя)   -  person    schedule 28.11.2018
comment
используйте 1_   -  person rioV8    schedule 28.11.2018