Question

有没有办法可以让d3力量布局继续移动，即使它已经冷却了＃34;？我一直在使用它，但这个动作很小：

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

Answer 1

我实际上是凭借这一点自己想出来的：

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

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

Answer 2

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

force.alpha(0.1);

请注意，即使alpha可能大于零，也不一定会有任何（重大）移动。在某些时候，布局将稳定到其平衡状态并获得重大改变，例如，你需要做出改变。移动其中一个节点。

Answer 3

正如其他答复者所指出的那样，模拟的alpha参数控制着系统中的热量。热量的衰减速度决定了力分布冷却到停止的速度，这种速度一旦alpha到达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>

Answer 4

传入函数而不是值。

.alpha(() => 0.1)

有没有办法让D3力量布局不断移动？

4 个答案: