有没有办法让 D3 强制布局不断移动？答案

【问题标题】：Is there a way to make a D3 force layout continually move?有没有办法让 D3 强制布局不断移动？
【发布时间】：2015-04-02 06:22:50
【问题描述】：

有没有办法让 d3 强制布局即使在“冷却”后也能继续移动？我一直在用这个，但动作很小：

svg.on('mousemove', function() {
   force.start();
});

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

实际上是我自己想出来的：

setInterval(function(){force.alpha(0.1);},250);

这在大型布局上可能不是性能最高的，但它在我的 20 个节点的力布局上提供了很好的持续漂移。

【讨论】：

【解决方案2】：

正如其他回答者所指出的那样，模拟的alpha 参数控制系统中的热量。热量的衰减速度决定了力布局冷却到停止的速度，这会在alpha 达到alphaMin 时发生。

对于 D3 v3 或更低版本，其他答案是通过操纵 alpha 将能量注入模拟的方法。但是，从 D3 v4 开始，您可以使用simulation.alphaDecay() 直接控制alpha 的衰减率。将衰减率设置为 0 将使模拟无限运行。这样一来，您就可以自行决定设置alpha 的级别，并始终将其保持在完全相同的级别。

有关可运行的演示，请查看以下改编自 Mike Bostocks Force-Directed Tree notebook 的 sn-p：

d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json")
  .then(data => {
  const width = 400;
  const height = 400;
  const root = d3.hierarchy(data);
  const links = root.links();
  const nodes = root.descendants();

  const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1))
      .force("charge", d3.forceManyBody().strength(-50))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .alphaDecay(0);

  const svg = d3.select("body")
    .append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [-width / 2, -height / 2, width, height]);

  const link = svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
    .selectAll("line")
    .data(links)
    .join("line");

  const node = svg.append("g")
      .attr("fill", "#fff")
      .attr("stroke", "#000")
      .attr("stroke-width", 1.5)
    .selectAll("circle")
    .data(nodes)
    .join("circle")
      .attr("fill", d => d.children ? null : "#000")
      .attr("stroke", d => d.children ? null : "#fff")
      .attr("r", 3.5);

  node.append("title")
      .text(d => d.data.name);

  simulation.on("tick", () => {
    link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

    node
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
  });
});

&lt;script src="https://d3js.org/d3.v5.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

冷却和移动量由alpha parameter 控制。如果您想保持布局连续运行，请将 alpha 重置为非零：

force.alpha(0.1);

请注意，即使 alpha 可能大于零，也不一定会有任何（显着）移动。在某些时候，布局将进入平衡状态，并且要进行重大更改，您必须例如移动其中一个节点。

【讨论】：

【解决方案4】：

传入一个函数而不是一个值。

.alpha(() => 0.1)

【讨论】：