Question

我是后端开发人员已有好几年了，但是在前端问题上是新手。我使用“ graphviz”（使用d3.js）从DOT表示法绘制了SVG图。一切正常，但我不介意一件事：

如果我“打开”另一张（或同一张）图，则其起始位置为即使我完全删除了它，也与之前绘制的图形相同 dom中整个节点的内容如下：

  var svg = d3.selectAll("svg");
  var otherBelow = svg.selectAll("*");
  otherBelow.remove();
  // svg.remove();

执行此操作并检查页面源，是否确实删除了SVG下的节点但是绘制新图形时，它具有与先前图形完全相同的位置在“变换”属性中移动图。通过重置位置优先解决了此问题，但问题仍然存在 “鼠标向下移动”功能。然后图立即“跳”到旧的一个职位。但是为此，我什至无法获得某处的信息在页面源中。实际生成的页面代码是100％相同的（差异工具），但行为有所不同。不知道这怎么可能。

所以现在我的问题是：是否存在一种缓存？还是有可能浏览器缓存内部使用某种方式？该如何解决？

P.s。如果删除SVG节点本身，则会得到完全好奇的行为。那么新绘制的图根本就无法移动。

Answer 1

这个（丑陋的）解决方法对我有用。

// 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 = ''删除旧图并创建新图不应在同一渲染阶段/同时发生，因此超时功能。
解决方法的第二部分是使用新的graphivz-instance 呈现新图形，因此 d3.select(...)在超时功能中。

Answer 2

graphviz渲染器仍然存在于其创建的元素上，并且其所有数据仍然完整。

删除svg，然后重新使用渲染器不是有效的用例。 Nico的答案可能是正确的，但是有更好的方法来做到这一点，但是为了告诉您应该怎么做，我需要查看所有代码，以便我能真正理解您的意思。想做。

有一种缓存吗？ -SVG（D3）图记住了它的旧位置

2 个答案: