强制有向图停止响应

Question

var containerdiv = document.getElementById("container");
var svg = d3.select(containerdiv).append("svg")

// Extract the width and height that was computed by CSS.
var width = containerdiv.clientWidth;
var height = containerdiv.clientHeight;

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width/2, height/2));

function redraw(){

  console.log("window is being redrawn");

  width = containerdiv.clientWidth;
  height = containerdiv.clientHeight;

  simulation.force("center", d3.forceCenter(width/2, height/2));

  // Use the extracted size to set the size of an SVG element.
  svg
    .attr("width", width)
    .attr("height", height);

}

// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", redraw);

目前我正在尝试使用上面的代码获得一个响应式窗口。 forceSimulation 在停止响应窗口大小调整之前改变了它的中心几次。我有声明：console.log("window is being redrawn");，我知道CSS 每次调整窗口大小时都会检测到。但行为如下：

对函数redraw的初始调用

---

窗口大小调整工作

---

窗口大小调整已停止工作

Answer 1

D3 模拟有一个内部计时器，并且在冷却之前只运行给定数量的滴答声（大约 300 个）。

因此，您必须使用restart() 重新加热模拟。根据 API，restart()：

重新启动模拟的内部计时器并返回模拟。与simulation.alphaTarget 或simulation.alpha 结合使用，此方法可用于在交互过程中“重新加热”模拟，例如在拖动节点时，或在使用simulation.stop 暂时暂停后恢复模拟。

因此，您可以在 redraw 函数中执行此操作：

simulation.alpha(.8).restart();