Javascript 计算到每个树节点的水平距离

我正在为繁殖的老鼠创建一个系谱树图，我在计算每个树节点所需的水平距离时遇到了困难，因为后代的数量不同或是动态的

我找到了一个用于绘制树的脚本，但它似乎没有任何文档

在这方面我需要帮助 剧本

var stage=$（'#stage'）；
var节点_维数={w:80，h:80}；
var段_维数={h:5}；
变量坐标={x:50，y:50}；
变量增量={x:200，y:150}；
//AJAX调用产生的JSON数组示例。
变量匹配=[{
“名称”：“一”，
“男”：1234，
“女”：5643，
“男性血统”：空，
“女性家长”：空，
“一代”：0，
“列”：0
}, {
“姓名”：“两个”，
“男”：6737，
“女性”：1627年，
“男性血统”：[“四”]，
“女性家长”：空，
“一代”：0，
“专栏”：2
}, {
“名字”：“三个”，
“男”：9332，
“女”：6227，
“男性血统”：[“五”、“六”]，
“女性家长”：空，
“一代”：0，
“专栏”：3
}, {
“名字”：“四个”，
“男”：1111，
“女”：6537，
“男性血统”：空，
“女性家长”：“一个”，
"一代":，
“栏”：1
}, {
“姓名”：“五个”，
“男”：8853，
“女”：3189，
“男性血统”：空，
“女性家长”：“两个”，
"一代":，
“专栏”：2
}, {
“姓名”：“六个”，
“男”：8853，
“女”：3189，
“男性血统”：空，
“女性家长”：“三个”，
"一代":，
“专栏”：3
}];
var m=新映射（）；
对于（变量i=0；iF:'+pair.femal，
阶段:阶段,，
w：节点尺寸。w，
h：节点尺寸。h，
x:COORDINATES.x+（INCREMENTS.x*pair.column），//公式应根据子体进行调整-帮助
y：坐标.y+（增量.y*pair.generation）
}).attach（）；
变量元素={
“配对”：配对，
“节点”：节点
};
m、 集合（pair.name、element）；
}
m、 forEach（函数（元素、键、m）{
//我们将创建两个分段
//首先是男性血统
if（element.pair.male_沿袭！=null）{
for（var i=0；i

我甚至不想（请原谅……）深入探究“您的”特定问题的原因，我可以明确地说“树绘制本质上是一个递归问题。”

此外，直接映射到HTML“DOM”也不是问题（您必须在决定“树需要什么样的外观”之后而不是之前“处理DOM”）

一般来说，树绘制问题需要从下到上递归地工作：最低的非叶节点平均分布它们的叶，然后将它们自己定位在最左边和最右边的子节点之间，然后报告它们的宽度等于它们的子节点的宽度。（然后，这个问题的递归描述或多或少令人满意地解决了自身问题，从而涵盖了整个树。）

一旦确定了整个树的显示方式，下一个（但完全不相关的…）问题是：如何操作DOM树，这是“或多或少驱动浏览器的东西”，以实际生成所需的视觉结果

（“嗯……除了在Internet Explorer 8上。”）

甚至没有尝试（请原谅……）深入探究“您的”特定问题的原因，我可以明确地说，“树绘制是一个固有的递归问题。”

此外，直接映射到HTML“DOM”也不是问题（您必须在决定“树需要什么样的外观”之后而不是之前“处理DOM”）

一般来说，树绘制问题需要从下到上递归地工作：最低的非叶节点平均分布它们的叶，然后将它们自己定位在最左边和最右边的子节点之间，然后报告它们的宽度等于它们的子节点的宽度。（然后，这个问题的递归描述或多或少令人满意地解决了自身问题，从而涵盖了整个树。）

一旦确定了整个树的显示方式，下一个（但完全不相关的…）问题是：如何操作DOM树，这是“或多或少驱动浏览器的东西”，以实际生成所需的视觉结果

---

（“嗯……除了在Internet Explorer 8上。”）

为什么不使用像

vis.js

这样具有层次结构布局的工具呢？为什么不使用像

vis.js

这样具有层次结构布局的工具呢？

var node = new Node({
  title: 'M: ' + pair.male + '<br />F: ' + pair.female,
  stage: stage,
  w: NODE_DIMENSIONS.w,
  h: NODE_DIMENSIONS.h,
  x: COORDINATES.x + (INCREMENTS.x * pair.column), // Formula should adjust based on descendants - HELP
  y: COORDINATES.y + (INCREMENTS.y * pair.generation)
}).attach();

<div id="stage"></div>

.node h4 {
  position: static;
  left: auto;
  bottom: auto;
  width: 80px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  text-shadow: none;
  color: #ffffff;
  font-weight: bold;
}

var stage = $('#stage');

var NODE_DIMENSIONS = { w: 80, h: 80 };
var SEGMENT_DIMENSIONS = { h: 5 };
var COORDINATES = { x: 50, y: 50 };
var INCREMENTS = { x: 200, y: 150 };

// Sample JSON array resulting from an AJAX call.
var mating = [{
  "name": "one",
  "male": 1234,
  "female": 5643,
  "male_lineage": null,
  "female_parent": null,
  "generation": 0,
  "column": 0
}, {
  "name": "two",
  "male": 6737,
  "female": 1627,
  "male_lineage": ["four"],
  "female_parent": null,
  "generation": 0,
  "column": 2
}, {
  "name": "three",
  "male": 9332,
  "female": 6227,
  "male_lineage": ["five", "six"],
  "female_parent": null,
  "generation": 0,
  "column": 3
}, {
    "name": "four",
  "male": 1111,
  "female": 6537,
  "male_lineage": null,
  "female_parent": "one",
  "generation": 1,
  "column": 1
}, {
    "name": "five",
  "male": 8853,
  "female": 3189,
  "male_lineage": null,
  "female_parent": "two",
  "generation": 1,
  "column": 2
}, {
    "name": "six",
  "male": 8853,
  "female": 3189,
  "male_lineage": null,
  "female_parent": "three",
  "generation": 1,
  "column": 3
}];

var m = new Map();

for (var i = 0; i < mating.length; i++) {
  var pair = mating[i];
  var node = new Node({
    title: 'M: ' + pair.male + '<br />F: ' + pair.female,
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: COORDINATES.x + (INCREMENTS.x * pair.column), // Formula should adjust based on descendants - HELP
    y: COORDINATES.y + (INCREMENTS.y * pair.generation)
  }).attach();

  var element = {
    "pair": pair,
    "node": node
  };

  m.set(pair.name, element);
}

m.forEach(function(element, key, m) {
  // We are going to create 2 segments

  // First is for the male lineage
  if (element.pair.male_lineage != null) {
    for(var i = 0; i < element.pair.male_lineage.length; i++) {
        new Segment({
        h: SEGMENT_DIMENSIONS.h,
        stage: stage,
        origin: element.node,
        destination: m.get(element.pair.male_lineage[i]).node
      }).attach();
    }
  }

  // Last is the female parent
  if (element.pair.female_parent != null) {
    new Segment({
      h: SEGMENT_DIMENSIONS.h,
      stage: stage,
      origin: element.node,
      destination: m.get(element.pair.female_parent).node
    }).attach();
  }
});