我正在为繁殖老鼠创建一个谱系 TreeMap ,但我在计算每个树节点所需的水平距离时遇到了麻烦,因为后代的数量会变化或者是动态的。
我找到了一个用来绘制树的脚本,但它看起来没有任何文档。
我需要这部分的帮助
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();
}
});
最佳答案
甚至无需尝试(请原谅我......)深入研究“您的”特定问题的原因和原因,我就可以断然地说“树绘制本质上是一种递归问题。”
此外,这不是直接映射到 HTML“DOM”的问题。 (您必须在决定“树需要是什么样子”之后而不是之前“处理 DOM”。)
一般来说,树绘制问题需要从下到上递归地进行:最低的非叶节点均匀地分布其叶子,然后将自己定位在最左边和最右边的子节点之间等距,然后报告 它们的宽度等于其子级的宽度。 (这个问题的递归描述随后会自行解决,或多或少令人满意地涵盖整个树。)
一旦您确定了整个树希望如何显示,您的下一个(但完全不相关......)问题是:如何操作DOM -tree,“或多或少驱动浏览器的东西”,真正产生您想要的视觉结果。
(“呃...Internet Explorer 8 除外。”)
关于javascript - 计算距每个树节点的水平距离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38001458/