d3：Multi-Foci Force关键代码组件理解

多焦点力的真正魔力就在这里完成；

function tick(e) {
    var k = .1 * e.alpha;

    // Push nodes toward their designated focus.
    nodes.forEach(function(o, i) {
        o.y += (foci[o.id].y - o.y) * k;
        o.x += (foci[o.id].x - o.x) * k;
    });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}   

但我希望能对正在发生的事情进行一些澄清。

我相信 alpha 是一种力方法，它控制力停止的速率，接受 [0, 1] 范围内的值 - 较高的值会导致力缓慢停止，较低的值会更快。

然后，我们迭代原始数组，并将 x 和 y 位置（最初不存在，因此在 forEach 循环的第一次迭代中首次分配）增加 k * 焦点的 x 和 y 分量观点。

最终它们将始终朝着指定的 x 和 y 位置移动，但是我们如何保证根据这个本身基于 alpha 的 k 值将它们移动到那里呢？节点沿 x 轴和 y 轴移动的程度是否由 .1 常数控制？设置更高/更低意味着更多/更少向焦点的漂移？

最后为什么我们要变换节点呢？我会理解

node.attr("cx", function(d) { return d.x}) 和 y 相同。为什么要转型？

提前致谢。

jsfiddle -https://jsfiddle.net/hiwilson1/dL9r22ny/ https://jsfiddle.net/hiwilson1/dL9r22ny/

更新：我怀疑我的问题的最后一部分，为什么我们变换节点，是因为我们移动 g 元素而不是圆形元素，并且我们不能在 g 元素上使用 cx 和 cy 。不过，仍然不确定为什么我们将它们翻译为 d.x 和 d.y，这不会将它们从任意分配的 d.x 和 d.y 值移至有效地将这些位置加倍吗？ （如果我们从 [10, 10] 开始并翻译另一个 [10, 10]，我们最终会得到 [20, 20]？）

动画是由alpha。这是一个始终相同的几何级数：设置为 0.1 in.start()并在每个刻度处乘以0.99，当小于0.005时动画停止

alpha: 0.0990
alpha: 0.0980
alpha: 0.0970
alpha: 0.0961
alpha: 0.0951
alpha: 0.0941

...etc.

force.tick = function() {
    if ((alpha *= .99) < .005) {
        event.end({
            type: "end",
            alpha: alpha = 0
        });
        return true;
    }
    //other code...
};

它代表布局中的“热量”，因为它用于确定节点的速度。这类似于气体的温度，它与气体分子的平均动能成正比。 “冷却”被预编程为始终为当前“温度”的-1%。

元素的初始位置也设置在.start()充当Math.random() * size对于 x 和 y，其中 size 分别是宽度和高度。这个做完了before首先forEach in the tick功能。

function tick(e) {
    //var k = .1 * e.alpha;
  var k = .1 * e.alpha;
  log.text('alpha: ' + d3.format(".4f")(e.alpha * 1000))
    // Push nodes toward their designated focus.
    nodes.forEach(function (o, i) {
        o.y += (foci[o.id].y - o.y) * k;
        o.x += (foci[o.id].x - o.x) * k;
    });

在上文中，forEach语句中，如果元素 y 位置大于焦点 y 位置，那么它将被赋予一个较小的 y，与 x 位置类似。这意味着它们将以与距焦点的距离成正比的速度向焦点移动。比例常数k is 0.1*alpha呈几何递减k = 0.1*0.1 to k = 0.1*0.005，随着动画的进行。最终位置是其初始位置的函数，并且k以及其他重力、电荷和摩擦力。

节点是g除了其子元素的引用（定位上下文）之外没有任何定位的元素。这是包含的原点（左上角）svg元素及其位置是页面流和 CSS 定位的结果。的定位背景g元素可以通过其变换属性进行更改，并且该属性由其所有子元素继承。如果没有 g 元素，圆圈和文本元素都必须单独定位，这样工作量就减半了。如果没有变换，所有圆圈和文本都将定位在左上角的中心svg元素。

每个价格变动计算的新头寸是绝对值，而不是价值变化。

节点位置的变化为(foci[o.id].y - o.y) * k这将使他们朝着他们的焦点移动。这被“添加”到现有值（尽管它可能是负数）并存储在节点数据上（o.x and o.y）， 这个说法

node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

使用新数据（d）来更新翻译，这仍然是相对于svg起源。它是一个转换, not a move，因此它不会相对于当前位置进行平移，而是会更改相对于当前位置的平移svg元素原点（这是元素的定位上下文）g）。因此，如果我们从 [10,10] 开始并且新的计算结果为 [10,10]，则相对于之前的位置，位置将保持在 [10,10]。svg定位上下文。