d3.js 关于力引导图的link.js的简单阅读

初始化函数

function initialize() {
    if (!nodes) return;
    var i,
        n = nodes.length,
        m = links.length,
        nodeById = map(nodes, id),
        link;
    for (i = 0, count = new Array(n); i < m; ++i) {
      link = links[i], link.index = i;
      if (typeof link.source !== "object") link.source = find(nodeById, link.source);
      if (typeof link.target !== "object") link.target = find(nodeById, link.target);
      count[link.source.index] = (count[link.source.index] || 0) + 1;
      count[link.target.index] = (count[link.target.index] || 0) + 1;
    }

    for (i = 0, bias = new Array(m); i < m; ++i) {
      link = links[i], bias[i] = count[link.source.index] / (count[link.source.index] + count[link.target.index]);
    }

    strengths = new Array(m), initializeStrength();
    distances = new Array(m), initializeDistance();
  }

计算出来两个值strengths和distances 有一个过渡值count distances的值始终固定。

force函数

function force(alpha) {
    for (var k = 0, n = links.length; k < iterations; ++k) {
      for (var i = 0, link, source, target, x, y, l, b; i < n; ++i) {
        link = links[i], source = link.source, target = link.target;
        x = target.x + target.vx - source.x - source.vx || jiggle();
        y = target.y + target.vy - source.y - source.vy || jiggle();
        l = Math.sqrt(x * x + y * y);
        l = (l - distances[i]) / l * alpha * strengths[i];
        x *= l, y *= l;
        target.vx -= x * (b = bias[i]);
        target.vy -= y * b;
        source.vx += x * (b = 1 - b);
        source.vy += y * b;
      }
    }
  }

上面的代码遍历了所有边，对于每一条边，都计算这条边的两个结点的受力，关键代码是下面一行： l = (l - distances[i]) / l * alpha * strengths[i]; 其中l为两结点间的距离，distances为配置的边的长度，alpha与strengths也基本为常量，所以当距离与配置的边长相等时受力为零，否则都会出现引力或斥力，这就是所谓的弹簧力，遵守胡克定律。一句说就是你配置了一个弹簧的长度，把连接两个结点的边想象成弹簧，当拉得太长时会有一个力把它们拉拢，当太短时弹簧被压缩会将它们推开。其它的力基本也同理，就是运用一些物理上的受力公式进行计算。

测试数据

{
    "nodes": [
      {"id": "name0", "group": 1},
      {"id": "name1", "group": 1},
      {"id": "name2", "group": 1},
      {"id": "name3", "group": 1},
      {"id": "name4", "group": 1},
      {"id": "name5", "group": 1},
      {"id": "name6", "group": 1},
      {"id": "name7", "group": 1}
    ],
    "links": [
      {"source": "name0", "target": "name1", "value": 1},
      {"source": "name0", "target": "name2", "value": 1},
      {"source": "name0", "target": "name3", "value": 1},
      {"source": "name0", "target": "name4", "value": 1},
      {"source": "name1", "target": "name5", "value": 1},
      {"source": "name1", "target": "name6", "value": 1},
      {"source": "name5", "target": "name7", "value": 1}
    ]
  }

打印的

count 计算方法在初始化里。

strengths 的计算方法

function defaultStrength(link) {
    return 1 / Math.min(count[link.source.index], count[link.target.index]);
  }

distances

distance = constant(30)
export default function(x) {
  return function() {
    return x;
  };
}

结果展示