d3 bubble源码分析

技术

d3、d3.pack、d3.hierarchy

展示

https://bl.ocks.org/xunhanliu/e0688dc2ae9167c4c7fc264c0aedcdd1

关于怎么使用，代码中有关键注释。

 

d3.pack

// https://d3js.org Version 4.8.0. Copyright 2017 Mike Bostock.

层级数据的结构

 这是一种典型的树形结构，每个节点包含树的深度和高度，还有“父亲指针”，“儿子指针”。

部分源码

var index$2 = function() {
  var radius = null,
      dx = 1,
      dy = 1,
      padding = constantZero;

  function pack(root) {
    root.x = dx / 2, root.y = dy / 2;
    if (radius) {
      root.eachBefore(radiusLeaf(radius)) //前序遍历,对每个节点的半径进行设置。
          .eachAfter(packChildren(padding, 0.5)) //后序遍历
          .eachBefore(translateChild(1));
    } else {
      root.eachBefore(radiusLeaf(defaultRadius$1))
          .eachAfter(packChildren(constantZero, 1))
          .eachAfter(packChildren(padding, root.r / Math.min(dx, dy)))//确定每个节点的半径
          .eachBefore(translateChild(Math.min(dx, dy) / (2 * root.r)));//处理每个节点的偏移
    }
    return root;
  }

  pack.radius = function(x) {
    return arguments.length ? (radius = optional(x), pack) : radius;
  };

  pack.size = function(x) {
    return arguments.length ? (dx = +x[0], dy = +x[1], pack) : [dx, dy];
  };

  pack.padding = function(x) {
    return arguments.length ? (padding = typeof x === "function" ? x : constant$8(+x), pack) : padding;
  };

  return pack;
};

function radiusLeaf(radius) {
  return function(node) {
    if (!node.children) {
      node.r = Math.max(0, +radius(node) || 0);
    }
  };
}

function packChildren(padding, k) {
  return function(node) {
    if (children = node.children) {
      var children,
          i,
          n = children.length,
          r = padding(node) * k || 0,
          e;

      if (r) for (i = 0; i < n; ++i) children[i].r += r;
      e = packEnclose(children);
      if (r) for (i = 0; i < n; ++i) children[i].r -= r;
      node.r = e + r;
    }
  };
}

function translateChild(k) {
  return function(node) {
    var parent = node.parent;
    node.r *= k;
    if (parent) {
      node.x = parent.x + k * node.x;
      node.y = parent.y + k * node.y;
    }
  };
}

主要逻辑在L10-L12.

1. root.eachBefore(radiusLeaf(radius))函数 比较简单，前序遍历，对每个节点的半径进行设置。其中radius是回调函数，参数是node.
2. root.eachAfter(packChildren(padding, 0.5)) //后序遍历,在packEnclose函数中设置每个children相对于此节点的位置，并返回此节点的半径大小。这句话完成了半径的设置和节点相对于父节点的相对位置。
3. root.eachBefore(translateChild(1)); //由于第二步的位置偏移只是相对于父节点的，这里，递归的把children的偏移加上其父亲节点的偏移。

注意L15行功能是否多余：

　　本来packEnclose生成的布局是圆形相切布局（圆紧挨着圆，可能不太好看），如何在圆之间加一些空隙，这里作者用了一个小技巧：把计算之前的圆增大一点，经过packEnclose布局后，再把圆的半径给恢复。注：原数据中除叶子节点外都没有半径信息的，如果没有L15的代码的话，冒然增加一个padding，是无效果的，最后的结果是相切布局。L15的结果是把所有节点的半径都设置一下（相切布局）。

其中packChildren中的packEnclose函数是布局的核心代码。此部分代码未使用碰撞的思想（需要迭代，速度就更慢了），直接进行几何的相切布局。

使用方式：

返回结果： 外圆的半径。注意原数据a中每个元素多了一些坐标信息。意思就是，给一组点的大小，经过这个函数后，会得出一些布局信息。