d3.js家庭图表

Question

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

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

我已经成为了这个傻瓜 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”分层图布局。 （你也可以通过力布局得到类似的东西，但是正确的约束是非常繁琐的）

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

我个人在使用高度优化的dagre lib for sugiyama计算以及dagre-d3中的d3自适应方面取得了很好的成功。 这两个假设您的数据模型类似于图形且与graphlib兼容，但您可以轻松地将数据结构转换为图形库并返回（here's an example for cytoscape data structures）