Javascript 从Obvvable HQ迁移到HTML的可折叠整洁水平树只在中间渲染单个大节点

我一直在尝试将其复制成常规的html css js格式。下面是我的实现

const width=4000；
让tree=data=>d3.tree（）
.尺寸（[宽度*2，宽度]）
.分离（（a，b）=>（a.父母==b.父母？1:3））
（d3.层次结构（数据））；
const data=d3.json（“https://cdn.jsdelivr.net/gh/d3/d3-hierarchy@master/test/data/flare.json”）；
const svg=d3.选择（“svg”）
.样式（“宽度”、“100%”）
.style（“高度”、“自动”）
.style（“填充”、“10px”）
.样式（“框大小”、“边框框”）
.style（“字体”，“12px无衬线”）；
常量g=svg.append（“g”）；
const linkgroup=g.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#555”）
.attr（“笔划不透明度”，0.4）
.attr（“笔划宽度”，1.5）；
const nodegroup=g.append（“g”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划宽度”，3）；
函数newdata（animate=true）{
设根=树（数据）；
让links_data=root.links（）；
让links=linkgroup
.selectAll（“路径”）
.data（links\u data，d=>d.source.data.name+“\u”+d.target.data.name）；
links.exit（）.remove（）；
让newlinks=links
.输入（）
.append（“路径”）；
设t=d3.transition（）
.持续时间（动画？400:0）
.ease（d3.easeLinear）
.on（“结束”，函数（）{
const-box=g.node（）.getBBox（）；
svg.transition（）.duration（1000.attr）（“viewBox”、`${box.x}${box.y}${box.width}${box.height}`）；
});
让alllinks=linkgroup.selectAll（“路径”）
所有链接
.过渡（t）
.attr（“d”，d3.linkHorizontal（）
.x（d=>d.y）
.y（d=>d.x））；
让节点_data=root.subjects（）.reverse（）；
让节点=节点组
.全选（“g”）
.数据（节点\数据，功能（d）{
如果（d.父母）{
返回d.parent.data.name+d.data.name；
}
返回d.data.name
});
nodes.exit（）.remove（）；
设newnodes=nodes
.enter（）.append（“g”）；
让allnodes=animate？节点组。选择全部（“g”）。转换（t）：节点组。选择全部（“g”）；
所有节点
.attr（“转换”，d=>`
翻译（${d.y}，${d.x}）
`);
newnodes.append（“圆”）
.attr（“r”，4.5）
.打开（“单击”，功能（d）{
设altChildren=d.data.altChildren | |[]；
让children=d.data.children；
d、 data.children=altChildren；
d、 data.altChildren=儿童；
newdata（）；
});
节点组。选择全部（“g圆”）。属性（“填充”，功能（d）{
设altChildren=d.data.altChildren | |[]；
让children=d.data.children；
返回d.children | |（children&（children.length>0 | | altChildren.length>0））？“#555”：“#999”
});
newnodes.append（“文本”）
.attr（“dy”，“0.31em”）
.text（d=>d.data.name）
.clone（true）.lower（）
.attr（“笔划”、“白色”）；
节点组。选择全部（“g文本”）
.attr（“x”，d=>！d.children？6:-6）
.attr（“文本锚定”，d=>！d.children？“开始”：“结束”）
//.attr（“transform”，d=>d.x>=Math.PI？“rotate（180）”：null）；
}
新数据（假）

试验
d3.json

方法使用fetchAPI返回承诺。您的代码在承诺解析之前完成运行，因此只绘制树根的初始圆。您需要使用async/await或then/catch处理json调用

d3.json("https://cdn.jsdelivr.net/gh/d3/d3-hierarchy@master/test/data/flare.json")
.then(json => {
  
     const data = json.data; // array of dates and values
     // d3 code for tree
})
.catch(error => {
    console.error(error);
});

---

有关异步/等待版本，请参阅。

谢谢您的回答！根据您的回答，我创建了这个JSFIDLE，它现在运行得非常好：