js画吊线图

一、定义一个长话短说的代替物：$(id)=return document.getElementById(id)
定义一个函数，函数名叫$。接收一个参数id ，调用时返回id为此id的元素对象。

function $(id) {
return document.getElementById(id)
}

二、定义一个偏移量，参数为nodenode(结点):网络连接的端点，或两条(或多条)线路的连接点、控制点。

function offset(node)

{
var x = node.offsetLeft; //x横向左对齐
var y = node.offsetTop; //y纵向上对齐
var w = node.offsetWidth; //w宽度
var h = node.offsetHeight; //h高度
var parent = node.offsetParent; //parent父节点
while (parent != null) { //父节点不为空时，横向左偏移一个单位，纵向向上偏移一个单位
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent; //父节点相等
}

//如果宽度为0，父节点宽度为当前宽度，初始化+1，左右同样+1，边界宽度*2
if (w == 0) {
w += parseInt(node.currentStyle.width);
w += parseInt(node.currentStyle.paddingRight);
w += parseInt(node.currentStyle.paddingLeft);
w += parseInt(node.currentStyle.borderWidth) * 2;
}

//如果高度为0，父节点高度为当前高度，初始化+1，上下同样+1，边界高度*2
if (h == 0) {
h += parseInt(node.currentStyle.height);
h += parseInt(node.currentStyle.paddingTop);
h += parseInt(node.currentStyle.paddingBottom);
h += parseInt(node.currentStyle.borderWidth) * 2;
}
return { x: x, y: y, w: w, h: h };
}

三、结点的组织架构

function OrgNode() {
this.Text = null;
this.Link = null;
this.BoxWidth = null;
this.BoxHeight = null;
this.parentNode = null;
this.NodeGroupId = null; //同一层的级别序号,从零开始
this.NodeOrderId = null; //同一级中的序号,从零开始
this.TopLine = null;
this.BottomLine = null;
this.Depth = null;
this.Top = null;
this.Left = null;
this.Type = null;
this.Nodes = [];
this.customParam = []; //节点自定义参数
var This = this;
this.Nodes.Add = function(OrgNode_) {
OrgNode_.parentNode = This;
This.Nodes[This.Nodes.length] = OrgNode_;
}
this.Box = null;
this.Templet = null;
this.Id = "OrgNode_" + GetRandomId(20);

this.inIt = function(parentDivId) {
if (this.inIted == true) return;
var tempDiv = document.createElement("DIV");
var objContainer = document.getElementById(parentDivId);
if (objContainer == null) { objContainer = document.body; }
objContainer.appendChild(tempDiv);

if (this.BoxWidth != null) {
// if(offset(this.Box).w < this.BoxWidth){
this.Box.style.width = this.BoxWidth + "px";
// if(offset(this.Box).w > this.BoxWidth){
// this.Box.style.width=(this.BoxWidth - (offset(this.Box).w - this.BoxWidth)) +"px";
// }
// }
}

if (this.BoxHeight != null) {
// if(offset(this.Box).h < this.BoxHeight){
this.Box.style.height = this.BoxHeight + "px";
// if(offset(this.Box).h > this.BoxHeight){
// this.Box.style.height=(this.BoxHeight - (offset(this.Box).h - this.BoxHeight)) +"px";
// }
// }
}

this.Width = offset(this.Box).w;
this.Height = offset(this.Box).h;
this.inIted = true;
}

function GetRandomId(n_) {
var litter = "abcdefghijklmnopqrstuvwxyz"
litter += litter.toUpperCase()
litter += "1234567890";
var idRnd = "";
for (var i = 1; i <= n_; i++) {
idRnd += litter.substr((0 + Math.round(Math.random() * (litter.length - 0))), 1)
}
return idRnd;
}
}

四、架构展示

function OrgShow(OrgNode_) {
this.LineSize = 2;
this.LineColor = "#000000";

this.IntervalWidth = 100;
this.IntervalHeight = 50;
this.Top = 0;
this.Left = 0;
this.Depth = 0;
this.Nodes = [];
this.DepthGroup = []; //this.DepthGroup[n].Nodes 层深节点集合
//this.DepthGroup[n].NodeGroups[m] 层深节点按上层分类集合 this.DepthGroup[n].NodeGroups[m][k]层深节点
var This = this;
this.BoxWidth = null;
this.BoxHeight = null;
this.BoxTemplet = null;

this.Run = function(parentDivId) {
BoxInit(parentDivId, OrgNode_);
GetDepth(OrgNode_);
SetDepthsHeight() //设置层深高度

//***************************
for (var n = 1; n <= this.Depth; n++) { //设置顶距离
var tempTop = this.Top + GetDepthHeightToRoot(n);
var tempNodes = this.DepthGroup[n].Nodes;
for (var m = 0; m < tempNodes.length; m++) {
tempNodes[m].Top = tempTop;
}
}

//***************************
for (var n = this.Depth; n >= 1; n--) { //设置左距离
var DepthNodes = this.DepthGroup[n].Nodes;
if (n == this.Depth) {
// 暂时安排最下一层节点的位置
for (var m = 0; m < DepthNodes.length; m++) {
if (m == 0) {
DepthNodes[m].Left = 0;
} else {
DepthNodes[m].Left = DepthNodes[m - 1].Left + DepthNodes[m - 1].Width + this.IntervalWidth;
}
}
} else {
for (var m = 0; m < DepthNodes.length; m++) {
if (DepthNodes[m].Nodes.length != 0) {
//
// 根据下级节点位置，确定节点位置
//
var tempNodeLeft_ = DepthNodes[m].Nodes[0].Left + (GetGroupWidthByNode(DepthNodes[m].Nodes[0]) / 2);
tempNodeLeft_ -= (DepthNodes[m].Width / 2);
DepthNodes[m].Left = tempNodeLeft_;
} else {
//
// 没有下级节点的
//
SetLeftByDepthNode(DepthNodes, m, "LTR");
}
}

for (var m = 1; m < DepthNodes.length; m++) { //修正错误位置
var ErrDistance = this.IntervalWidth - (DepthNodes[m].Left - DepthNodes[m - 1].Left - DepthNodes[m - 1].Width);
if (ErrDistance > 0) {
for (var u_ = m; u_ < DepthNodes.length; u_++) {
AmendNodeLeft(DepthNodes[u_], ErrDistance);
}
}
}
}
}

var objParent = document.getElementById(parentDivId);
var maxWidth = SetDepthGroupWidth(); //设置群组宽度
// alert(objParent.documentElement.scrollWidth);
// alert(objParent.offsetWidth);
// alert(objParent.scrollWidth);
// alert(objParent.clientWidth);
// if (objParent.scrollWidth > maxWidth) {
objParent.style.width = maxWidth;
// }

var MaxLeftValue = this.Nodes[0].Left;
for (var n = 1; n < this.Nodes.length; n++) { //取得最小左距离
if (MaxLeftValue > this.Nodes[n].Left) {
MaxLeftValue = this.Nodes[n].Left;
}
}

MaxLeftValue = (-MaxLeftValue) + this.Left;
for (var n = 0; n < this.Nodes.length; n++) { //重新设置距离
this.Nodes[n].Left += MaxLeftValue;
this.Nodes[n].Box.style.left = this.Nodes[n].Left + "px"
this.Nodes[n].Box.style.top = this.Nodes[n].Top + "px"
}

//***************************
for (var n = 1; n <= this.Depth; n++) { //设置竖线条
var tempNodes = this.DepthGroup[n].Nodes;
for (var m = 0; m < tempNodes.length; m++) {
if (n != this.Depth) { //设置底线条
if (tempNodes[m].Nodes.length != 0) {
var tempLineLeft = tempNodes[m].Left + (tempNodes[m].Width / 2);
var tempLineHeight = ((this.IntervalHeight - this.LineSize) / 2);
tempLineHeight += (this.DepthGroup[n].Height - tempNodes[m].Height);
var tempLineTop = tempNodes[m].Top + tempNodes[m].Height;
var tempBottomLine = new CreateLine(parentDivId, 2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineBottom_" + tempNodes[m].Id);
tempNodes[m].BottomLine = tempBottomLine.Line;
}
}
if (n != 1) { //设置顶线条
var tempLineLeft = tempNodes[m].Left + (tempNodes[m].Width / 2);
var tempLineHeight = ((this.IntervalHeight - this.LineSize) / 2);
var tempLineTop = tempNodes[m].Top - tempLineHeight;
if (this.DepthGroup[tempNodes[m].Depth].NodeGroups[tempNodes[m].NodeGroupId].length == 1) { //如果只有一个节点
var tempBottomLineHeight = parseFloat(tempNodes[m].parentNode.BottomLine.style.height) + this.LineSize;
tempNodes[m].parentNode.BottomLine.style.height = (tempLineHeight + tempBottomLineHeight) + "px";
} else {
var temptopLine = new CreateLine(parentDivId, 2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineTop_" + tempNodes[m].Id);
tempNodes[m].TopLine = temptopLine.Line;
}
}
}
}

for (var n = 2; n <= this.Depth; n++) { //设置横线条
var tempNodeGroups_ = this.DepthGroup[n].NodeGroups;
for (var m = 0; m < tempNodeGroups_.length; m++) {
if (tempNodeGroups_[m].length != 1) {
var tempLineWidth = tempNodeGroups_[m].Width - (tempNodeGroups_[m][0].Width / 2) + this.LineSize;
tempLineWidth -= (tempNodeGroups_[m][tempNodeGroups_[m].length - 1].Width / 2);
var tempLineTop = tempNodeGroups_[m][0].Top - ((this.IntervalHeight - this.LineSize) / 2) - this.LineSize;
var tempLineLeft = tempNodeGroups_[m][0].Left + (tempNodeGroups_[m][0].Width / 2);
var tempGroupLine = new CreateLine(parentDivId, 1, tempLineTop, tempLineLeft, tempLineWidth, this.LineSize, this.LineColor, "LineGroup_" + tempNodeGroups_[m][0].Id);
}
}
}

//*************************************************************************************************

function GetGroupWidthByNode(Node_) { //根据群组中任一节点，取得群组宽度
var tempNodesGroup_ = This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId];
var tempGroupWidth_ = tempNodesGroup_[tempNodesGroup_.length - 1].Left - tempNodesGroup_[0].Left;
tempGroupWidth_ += tempNodesGroup_[tempNodesGroup_.length - 1].Width
return tempGroupWidth_;
}

function GetDepthHeightToRoot(DepthId) { //取得距离顶层的高度
var tempHeight_ = 0;
for (var x_ = DepthId; x_ >= 1; x_--) {
tempHeight_ += This.DepthGroup[x_].Height;
}
tempHeight_ += This.IntervalHeight * (DepthId - 1);
tempHeight_ -= This.DepthGroup[DepthId].Height;
return tempHeight_;
}

function ChildNodesWidth(OrgObj) { //取得层宽
var ReWidth = 0;
for (var s_ = 0; s_ < OrgObj.Nodes.length; s_++) {
ReWidth += OrgObj.Nodes[s_].Width;
}
ReWidth += (OrgObj.Nodes.length - 1) * This.IntervalWidth;
return ReWidth;
}

if (OrgObj.Nodes.length != 0) {
for (var n = 0; n < OrgObj.Nodes.length; n++) {
GetDepth(OrgObj.Nodes[n]);
}
}
}

function BoxInit(parentDivId, OrgObj_) { //节点初始化
if (OrgObj_.Templet == null) {
OrgObj_.Templet = GetBoxTemplet();
}
OrgObj_.BoxWidth = This.BoxWidth;
OrgObj_.BoxHeight = This.BoxHeight;
OrgObj_.inIt(parentDivId);

if (OrgObj_.Nodes.length != 0) {
for (var n = 0; n < OrgObj_.Nodes.length; n++) {
BoxInit(parentDivId, OrgObj_.Nodes[n]);
}
}
}

function CreateLine(parentDivId, type_, top_, left_, long_, size_, color_, id_) {
this.Type = type_;
top_ = top_ + "";
left_ = left_ + "";
long_ = long_ + "";
this.Top = (top_.substr(top_.length - 2).toLowerCase() != "px") ? top_ + "px" : top_;
this.Left = (left_.substr(left_.length - 2).toLowerCase() != "px") ? left_ + "px" : left_;
this.Long = (long_.substr(long_.length - 2).toLowerCase() != "px") ? long_ + "px" : long_;
this.Size = (size_ == undefined) ? "1px" : size_ + "";
this.Id = (id_ == undefined) ? null : id_;
this.Size = (this.Size.substr(this.Size.length - 2).toLowerCase() != "px") ? this.Size + "px" : this.Size;
this.Color = (color_ == undefined) ? "#000000" : color_;
this.Line = document.createElement("DIV");

posted @ 2020-06-25 16:58 袁氏家谱网阅读(531) 评论(0) 编辑收藏举报

刷新页面返回顶部

袁氏家谱网

js画吊线图

公告