Javascript 使用OrgChart增加节点宽度的最佳方法

我用它来画树状结构。 出现长字符串时，默认字符串文本将被截断（例如，生物统计学和生物信息学核心）

我的想法是在CSS文件中更改

.orgchart.bioinformatics

的属性

width

。但是，如果集群中有十几个节点，我不想手动调整每个节点的宽度。如何在不截断每个单元格的情况下自动增加节点宽度，然后完全显示字符串

---

[重现问题]

let datascource={
'姓名'：'中心主任',
‘职务’：‘董事’，
'className'：'top-level'，
“儿童”：[{
'姓名'：'表觀基因體核心',
‘标题’：‘表观基因组学核心’，
“类名”：“表观基因组学”
},
{
'姓名'：'蛋白質體核心',
‘标题’：‘蛋白质组学核心’，
“类名”：“蛋白质组学”
},
{
'姓名'：'定序核心',
“标题”：“排序核心”，
“className”：“排序”
},
{
'姓名'：'藥物研發核心',
‘标题’：‘药物发现核心’，
“className”：“drug”
},
{
'姓名'：'幹細胞核心',
‘标题’：‘干细胞核心’，
“className”：“stem”
},
{
'姓名'：'免疫核心',
‘标题’：‘免疫学核心’，
“类名”：“免疫学”
},
{
'姓名'：'生物統計及生物資訊核心',
“标题”：“生物统计学和生物信息学核心”，
“类名”：“生物信息学”
}
]
};
var orgchart=$（“#图表容器”）.orgchart({
“数据”：datascource，
“节点内容”：“标题”，
“方向”：“b2t”
});
document.querySelector（“#图表容器”）.appendChild（orgchart）
#图表容器{
字体系列：Arial；
高度：320px；
最大宽度：1110px；
边界半径：5px；
溢出：自动；
文本对齐：居中；
}
生物信息学{
宽度：200px！重要；
}
如果要自动调整所有节点内容的大小：

#chart-container {
  font-family: Arial;
  height: 320px;
  max-width: 1110px;
  border-radius: 5px;
  overflow: auto;
  text-align: center;
}
.orgchart .node {
  width: auto !important;
}

.orgchart.node
是所有节点的基类，因此您只需添加
宽度：auto
。无需使用
.orgchart.bioinformatics

我在CodePen中留下了一个例子：

希望有帮助。
尝试重写google orgchart的
.google可视化orgchart表
类

.google-visualization-orgchart-table tr td.google-visualization-orgchart-node div{
    width: 250px!important;
}

但上面的代码将增加orgchart中所有节点的宽度

.google-visualization-orgchart-table tr td.google-visualization-orgchart-node div{
    width: 250px!important;
}

这对我有用
 我添加了上面的代码片段，但它不适合我。此方法将增加所有节点的宽度。预期结果应自动调整所有节点的宽度，但不显示截断文本字符串。@PennyLiu我更新了我的答案。您必须添加基本样式.orgchart.node并在内容生物信息学中覆盖它。谢谢你的答复。如果集群中有十几个节点，那么我必须在其上添加大量额外的类名（例如，
生物信息学
），以调整单元大小。有什么技巧我不需要设置任何类名，只需要调整它的大小吗？在这种情况下，只需保留.orgchart.node样式的属性“width:auto”，删除所有自定义类，如生物信息学，就可以了。它对我有用。我忘了添加
！类
.orgchart.node
中的重要信息。也可以使用nodeTemplate代替nodeContent，我把代码留在了codepen中，只是注释掉nodeContent并取消注释nodeTemplate。问候男人。