d3.js 家族图

Question

^ 这是开始增强图表以获取出生/死亡/姓名数据的目标 - 但让它更灵活地获取它。还要清理数据源。

我正在尝试开发 d3.js 家族图。我有兴趣尝试增强此图表的数据结构，以及标签的添加和空间/设计——如果有一种方法可以为零件提供动态长度以为其提供所需的空间。

我做了这个 jsfiddle http://jsfiddle.net/857edt69/30/

  // Create the node rectangles.
  nodes.append("circle")
    .attr("class", "node")
    .attr("r", function(d, i) {
      return smallRadius;
    })
    .style("fill", function(d, i) {

      var userName = d.userName;
      if (userName) {
        userName.toLowerCase()
      }

      var id = d.id + "-" + userName; //small circles
      return "url(#" + id + ")";
    })
    .attr("id", function(d) {
      return d.id;
    })
    .attr("display", function(d) {
      if (d.hidden) {
        return "none"
      } else {
        return ""
      };
    })
    .attr("cx", function(d) {
      return d.x - (smallRadius / 2) + 10;
    })
    .attr("cy", function(d) {
      return d.y - (smallRadius / 2) + 10;
    });


  // Create the node text label.
  nodes.append("text")
    .text(function(d) {
      //return d.name;
      return d.userName;
    })
    .attr("x", function(d) {
      return d.x - (smallRadius / 2) + 10;
    })
    .attr("y", function(d) {
      return d.y - (smallRadius / 2) - 20;
    });

Answer 1

用于这种类型的家谱的规范算法被称为“杉山”分层图布局。（你也可以通过强制布局获得类似的东西，但正确设置约束非常乏味）

Sugiyama 需要向下遍历树以测量宽度和偏移量，然后返回树以重新排序并放置以实现最小的线交叉。这不是最适合初学者的算法，但我找到的最简单的介绍是here

我个人在用于 sugiyama 计算的高度抛光的dagre lib 和dagre-d3 中的 d3 适应方面取得了很好的成功。这两个都假设您拥有类似图形且与graphlib兼容的数据模型，但是您可以轻松地将数据结构转换为 graphlib 并返回（这是 cytoscape 数据结构的示例）