我做了几年后端开发人员，但还是前端问题的新手。我使用"graphviz"(使用d3.js)从DOT符号中绘制了一个SVG图形。一切都很好，但有一件事我没有想到：
如果我"打开"另一个(或同一个)图，它的起始位置是与之前绘制的图形相同，即使我完全删除来自dom的整个节点内容如下：
var svg = d3.selectAll("svg");
var otherBelow = svg.selectAll("*");
otherBelow.remove();
// svg.remove();
执行此操作并检查页面源，SVG下面的节点实际上已删除但在绘制新图形时，它与先前图形的位置完全相同移动了"transform"属性中的图形。通过重置位置bevore解决了这个问题，但问题仍然存在"向下移动鼠标"功能。然后图形立即"跳转"到旧一个位置。但为此，我甚至无法获得有关某个地方的信息在页面源中。实际上，生成的页面代码是100%相同的(diff工具)，但是具有不同的行为。不明白这怎么可能。
现在我的问题是：是否存在一种缓存？或者可能有浏览器缓存以某种方式在内部使用？如何解决此问题？
附言：如果我删除SVG节点本身，我会得到一个完全恶意的行为。那么，新绘制的图形根本无法移动。
这个(丑陋的)解决方法为我做到了。
// Snipped to render a new graph and reset its position
// #graph -> id of d3-graphviz div-container
document.getElementById('graph').innerHTML = ''
setTimeout(() => {
d3.select("#graph").graphviz()
.dot(yourDotData)
.render()
}, 50)
解释/假设为什么这样做：
- 似乎用
.innerHTML = ''删除旧图和创建新图不应该在同一渲染阶段/同一时间发生，因此超时功能 - 解决方法的第二部分是使用新的graphicz实例来渲染新图形，因此超时功能内的
d3.select(...)
graphviz渲染器仍然存在于创建它的元素上，并且它的所有数据仍然完好无损。
删除svg然后重用渲染器不是一个有效的用例。Nico的答案可能是正确的，但有更好的方法可以做到这一点，但为了告诉你应该如何做，我需要查看你的所有代码，这样我才能理解你真正想做什么。