Почему я не могу добавить график в динамически вставляемый элемент SVG? - PullRequest
Новая
       38

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

0 голосов
/ 28 ноября 2018

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

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?

...