有没有办法让 D3 部队布局不断移动？

Question

有没有办法让 d3 强制布局即使在 "cooled" 之后也能继续移动？我一直在用这个但是动作很小:

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

Answer 1

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

force.alpha(0.1);

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

Answer 2

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

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

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

Answer 3

传入函数而不是值。

.alpha(() => 0.1)

Answer 4

正如其他回答者所指出的那样，模拟的 alpha parameter controls the amount of heat in the system. The rate of decay of that heat determines how fast the force layout cools down to a halt, which happens as soon as alpha reaches alphaMin。

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

对于可运行的演示，请查看以下改编自 Mike Bostocks Force-Directed Tree 笔记本的代码片段：

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);
  });
});

<script src="https://d3js.org/d3.v5.js"></script>

有没有办法让 D3 部队布局不断移动？

Is there a way to make a D3 force layout continually move?

d3.js

force-layout