d3 力导向布局在再热时扩展

Question

考虑任何 d3 力导向动画，例如：

http://bl.ocks.org/mbostock/1062288

加载该图并让节点稳定下来，这样它们就不会移动。将鼠标悬停在橙色节点上，让鼠标静止。单击并不执行任何其他操作。您会看到所有节点向内移动一点，然后又恢复正常。

我不喜欢这种不必要的动作，我需要删除它。

我相信这与“重新加热”的图表有关（请参阅https://github.com/mbostock/d3/wiki/Force-Layout )，它将 alpha 参数设置为 0.1。具体来说，我看到在以下任何一项之后立即发生了不必要的移动。

1. 一个新节点被添加到图表中
2. 从图中删除一个节点
3. force.drag() 被调用。

究竟是什么导致了这种“不必要的移动”，我该如何禁用它？ （不禁用节点拖动）

Answer 1

通常，当force.resume() 被触发时，alpha 值会从 0 跳到 0.1。通过更慢地放宽 alpha，我们可以掩盖“不必要的运动”。

我仍然对其他想法和解决方案持开放态度。

旧功能：

force.resume = function() {
  return force.alpha(.1);
};

替换函数：

force.resume = function() {
  var alpha = force.alpha()
  if( alpha < 0.005 ){ alpha = 0.0055 }
  else if( alpha < 0.11 ){ alpha += 0.0006 }
  return force.alpha(alpha);
};

Answer 2

行为主要来自 alpha。 d3内的alpha函数：

force.alpha = function(x) {
  if (!arguments.length) return alpha;
  x = +x;
  if (alpha) {
    if (x > 0) alpha = x; else alpha = 0;
  } else if (x > 0) {
    event.start({
      type: "start",
      alpha: alpha = x
    });
    d3.timer(force.tick);
  }
  return force;
};

所以当调用 alpha 时，如果大于 0 则启动 tick 事件

在滴答事件中，一开始，您可以看到导致您提到的“冻结”的中断：

if ((alpha *= .99) < .0005) {
         event.end({
           type: "end",
           alpha: alpha = 0
         });
         return true;
       }

现在，如果我们看一下 dragmove，它会调用 resume 函数：

function dragmove(d) {
      d.px = d3.event.x, d.py = d3.event.y;
      force.resume();
    } 

调用值为0.1的alpha函数：

 force.resume = function() {
      return force.alpha(.1);
    };

为了在 0.0005 停止跳跃和冻结，我认为自己没有任何可以使用的公共函数。

我有一个示例fiddle，它从导致冻结的刻度函数中删除了代码，并将恢复函数更改为以较小的 alpha 开始。

我相信这会提供您想要的结果，但我当然不建议自定义库。

也许有人知道如何在不修改源代码的情况下覆盖 tick 函数。

Answer 3

在

// Toggle children on click.
function click(d) {
  if (!d3.event.defaultPrevented) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
    update();
  }
}

您可以将更新移动到仅打开的子项

// Toggle children on click.
function click(d) {
  if (!d3.event.defaultPrevented) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
      update();
    } else {
      d.children = d._children;
      d._children = null;
    }

  }
}

所以没有子节点（橙色）的节点不会在点击时更新。