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

Question

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

我找到了一个脚本，我用它来绘制树，但它看起来没有任何文档。

这部分我需要帮助

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();

如果你想摆弄它，这里有一个Fiddle，下面提供了完整的代码。

HTML

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

CSS

.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();
  }
});

Answer 1

甚至不尝试(对不起…)深入了解您的“对于特殊问题，我可以明确地说，绘制树是一个固有的递归问题。

此外，不是直接映射到HTML “DOM的问题。,(你将不得不应付domdquo;在之后，而不是在之前，您决定树需要是什么样子。

一般来说，树的绘制问题需要从下到上递归地工作: 最低的非叶节点平均地分布它们的叶节点，然后在它们的子节点的最左和最右之间等距地定位它们自己，然后报告它们的宽度等于它们的子节点宽度的范围。,(然后，问题的递归描述会自行解决，或多或少令人满意，以包含整个树。)

一旦您确定了整个树希望如何显示，您的下一个问题(但完全无关…)是: 如何操作DOM-树，这是或多或少驱动浏览器的东西，实际产生您想要的视觉结果。

<我>(";喔…Internet Explorer 8除外。”)