Javascript 如何在HTML5、Css3和js中动态生成三个图形？

我已经用html5、css3构建了一个树形图，但是节点是静态的。现在我想让这个图形动态化。这里的动态意味着假设节点数量增加，并且有多个子节点，现在将使用新节点和子节点生成图形。

这只是使用vanilla JavaScript的一个示例。我从d3中得到了很多启发，包括如何将数据存储为节点的自引用树，以及如何首先遍历树的宽度

我已经尽可能地对代码进行了注释，希望这能给你一些启发。我会尝试稍微改善标签的定位，和/或增加页边距，以便更好地看到它们

const数据=[{
id:0，
标签：“命令序列开始”，
},
{
id:1，
家长：[0]，
标签：“W_SCMadl_刷新”，
状态：“完成”，
},
{
id:2，
家长：[1]，
标签：“W_adl_照片”，
状态：“完成”，
},
{
id:3，
家长：[2]，
标签：“W_adl_collect”，
状态：“完成”，
},
{
id:4，
家长：[3]，
标签：“W_adl_collect_cr”，
状态：“完成”，
},
{
id:5，
家长：[4]，
标签：“W_adl_sync”，
状态：“已中止”，
},
{
id:6，
家长：[5]，
标签：“W_adl_attach”，
状态：“等待”，
},
{
id:7，
家长：[6]，
标签：“W_adl_attach”，
状态：“等待”，
},
{
id:8，
家长：[7]，
标签：“W_adl_发布”，
状态：“等待”，
},
{
id:9，
家长：[8]，
标签：“W_adl_ds_ws”，
状态：“等待”，
},
{
id:10，
家长：[9]，
标签：“W64_共享_Preq_mkdir”，
状态：“等待”，
},
{
id:11，
家长：[10,12]，
标签：“W64_mkCopyPreq”，
状态：“等待”，
},
{
id:12，
家长：[0]，
标签：“WIN64_McMon”，
状态：“完成”，
},
];
//使数据数组成为自引用树，其中每个节点都有指向其
//父节点及其子节点
数据
.filter（d=>d.parents！==未定义）
.forEach（d=>{
d、 parents=data.filter（p=>d.parents.includes（p.id））；
d、 parents.forEach（p=>{
如果（p.children==未定义）{
p、 儿童=[]；
}
p、 儿童。推（d）；
});
});
const root=data.find（d=>d.parents==undefined）；
//树的宽度优先遍历，为每个节点执行'fn'
常量forEach=（根，fn）=>{
常量堆栈=[root]；
while（堆栈长度）{
const current=stack.shift（）；
if（当前的子项）{
stack.push（…current.children）；
}
fn（当前）；
}
};
const svg=document.querySelector（“.mv序列svg”）；
常量边距={
前20名，
底数：20，
右:20,，
左:20,，
};
常量宽度=+svg.getAttribute（“宽度”）-margin.left-margin.right；
常数stepHeight=40；
常量命名空间=”http://www.w3.org/2000/svg";
const gContainer=document.createElements（名称空间，“g”）；
gContainer.setAttribute（“transform”、`translate（${margin.left}、${margin.top}）`）；
svg.appendChild（gContainer）；
const linkscocontainer=document.createElements（名称空间，“g”）；
gContainer.appendChild（linksContainer）；
const nodesContainer=document.createElements（名称空间，“g”）；
gContainer.appendChild（nodesContainer）；
//给节点一个级别。首先完成这个循环，然后开始绘图，因为我们想
//并不是所有的父母都有一个健康水平
弗雷奇(
根，
d=>{
如果（d==根）{
d、 级别=0；
返回；
}
d、 level=Math.max（…d.parents.map（p=>p.level））+1；
}
);
弗雷奇(
根，
d=>{
//根据兄弟节点的数量定位节点。
常量同级=data.filter（n=>n.level==d.level）；
//如果节点是独子节点，则根应位于中心，
//任何其他节点都应该是其父节点的平均值
如果（兄弟姐妹。长度===1）{
如果（d.parents==未定义）{
d、 x=宽度/2；
}否则{
d、 x=d.parents.map（p=>p.x）.reduce（（s，v）=>s+v，0）/d.parents.length；
}
返回；
}
//否则，为所有同级节点平均分配空间
const siblingIndex=sibles.indexOf（d）；
const stepWidth=宽度/（同级.长度-1）；
如果（同级长度%2==0）{
//偶数兄弟姐妹
d、 x=步长*同级索引；
}否则{
/兄弟姐妹的数量，中间的一个必须在中间
d、 x=宽度/2+步长*（同级索引-（同级.长度-1）/2）；
}
}
);
弗雷奇(
根，
d=>{
//为所有新节点追加一个圆和“text”
d、 y=d级*八级；
const nodeContainer=document.createElements（名称空间，“g”）；
setAttribute（“transform”、`translate（${d.x}、${d.y}）`）；
nodeContainer.classList.add（“mv命令”，d.status）；
nodeContainer.appendChild（nodeContainer）；
const circle=document.createElements（名称空间，“圆”）；
圆圈.setAttribute（“r”，stepHeight/4）；
nodeContainer.appendChild（圆）；
const label=document.createElements（名称空间，“文本”）；
label.setAttribute（“dx”，stepHeight/4+5）；
label.textContent=d.label；
nodeContainer.appendChild（标签）；
//将每个父节点的链接附加到此节点
（d.parents | |[]）forEach（p=>{
const link=document.createElements（名称空间，“路径”）；
设path=`M${p.x}${p.y}`；
设dx=d.x-p.x；
设dy=d.y-p.y；
如果（dy>8）{
//向下移动到子节点的级别
path+=`v${dy-stepHeight}`；
dy=八；
}
path+=`s0${dy/2}，${dx/2}${dy/2}`；
path+=`s${dx/2}0，${dx/2}${dy/2}`；
link.setAttribute（“d”，路径）
linksContainer.appendChild（链接）；
})
}
);
//最后，将高度设置为完美匹配
setAttribute（“height”，Math.max（…data.map（d=>d.level））*stepHeight+margin.top+margin.bottom）
.mv-command.done{
填充：#477738；
}
.mv