【发布时间】：2018-05-01 14:01:52
【问题描述】：
我使用 d3-graphviz 来绘制交互式图表。我发现，以某种方式使用开始时创建的相同 graphviz 渲染器来重新绘制新/更新的图形会导致错误的布局。例如，如果我执行以下步骤，就会出错：
- 创建index.html，包括我们需要使用的d3、d3-graphviz和viz。
- 使用带有特定回调的 renderDot() 函数。
- 再次调用 renderDot() 绘制另一个，带有多行粗体标签
- 使用 renderDot() 再次渲染以生成与第 2 步相同的图形
我应该再次到达最后：
但是最后一步（第 4 步）会导致错误的布局图。节点和边不会放置在正确的位置：
还要注意，在第 3 步之后，如果我单击 svg，它会向上（一个方向）移动一点，这也很奇怪。我们点击后是这样的：
这里是源代码：
index.html:
<!-- language: lang-html -->
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src=https://d3js.org/d3.v5.min.js></script>
<script src=https://unpkg.com/viz.js@1.8.0/viz.js></script>
<script src=https://unpkg.com/d3-graphviz@1.5.0/build/d3-graphviz.min.js></script>
<!-- Main Graph -->
<div id="graph" style="text-align: center;" height=3200px width=3200px></div>
</body>
render.js：
<!-- language: typescript -->
// please run below code step by step
// create renderer
x = d3.select('#graph').graphviz()
// 1st rendering
x.renderDot(`
digraph {
node [style="filled"]
0 [id="0" label="honda::models"]
1 [id="1" label="hidden"]
2 [id="2" label="hidden"]
0 -> 1 [id="0->1" label=""]
0 -> 2 [id="0->2" label=""]
}
`, function() {
d3.selectAll('text')._groups[0].forEach(function(e) {
if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
e.innerHTML = ans[0].replace(ans[1],
"<tspan font-weight=bold>" + ans[1] + "</tspan>");
}
})
});
// 2nd rendering (bold and multi-line text label)
x.renderDot(`
digraph {
node [style="filled"]
0 [id="0" label="honda::models"]
1 [id="1" label="name: fit\\linventory id: 007"]
2 [id="2" label="hidden"]
0 -> 1 [id="0->1" label=""]
0 -> 2 [id="0->2" label=""]
}
`, function() {
d3.selectAll('text')._groups[0].forEach(function(e) {
if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
e.innerHTML = ans[0].replace(ans[1],
"<tspan font-weight=bold>" + ans[1] + "</tspan>");
}
})
});
// 3rd rendering
x.renderDot(`
digraph {
node [style="filled"]
0 [id="0" label="honda::models"]
1 [id="1" label="hidden"]
2 [id="2" label="hidden"]
0 -> 1 [id="0->1" label=""]
0 -> 2 [id="0->2" label=""]
}
`, function() {
d3.selectAll('text')._groups[0].forEach(function(e) {
if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
e.innerHTML = ans[0].replace(ans[1],
"<tspan font-weight=bold>" + ans[1] + "</tspan>");
}
})
});
您可以通过创建 index.html 来复制它，然后在 javascript 中逐步运行代码。
注意：我将回调函数留在那里，如果它在每一行中看到模式“text：xxx”，它会更新字体。在“隐藏”的情况下没有区别。
谢谢！
【问题讨论】：
标签： javascript d3.js graphviz