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

Question

我正在使用 OrgChart绘制树状结构。当出现长字符串时，默认字符串文本将被 chop (例如 Biostatistics 和 Bioinformatics Core)。

我的想法是改变CSS文件中.orgchart .bioinformatics的属性width。但是，如果我的集群中有十几个节点，我不想手动调整每个节点的宽度。如何自动增加节点宽度然后在每个单元格中完全显示字符串而不 chop ？

---

[重现问题]

let datascource = {
  'name': '中心主任',
  'title': 'Director',
  'className': 'top-level',
  'children': [{
      'name': '表觀基因體核心',
      'title': 'Epigenomics Core',
      'className': 'epigenomics'
    },
    {
      'name': '蛋白質體核心',
      'title': 'Proteomics Core',
      'className': 'proteomics'
    },
    {
      'name': '定序核心',
      'title': 'Sequencing Core',
      'className': 'sequencing'
    },
    {
      'name': '藥物研發核心',
      'title': 'Drug Discovery Core',
      'className': 'drug'
    },
    {
      'name': '幹細胞核心',
      'title': 'Stem cell Core',
      'className': 'stem'
    },
    {
      'name': '免疫核心',
      'title': 'Immunology Core',
      'className': 'immunology'
    },
    {
      'name': '生物統計及生物資訊核心',
      'title': 'Biostatistics and Bioinformatics Core',
      'className': 'bioinformatics'
    }
  ]
};

var orgchart = $('#chart-container').orgchart({
  'data': datascource,
  'nodeContent': 'title',
  'direction': 'b2t'
});

document.querySelector('#chart-container').appendChild(orgchart);

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

.orgchart .bioinformatics {
  width: 200px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js"></script>
<div id="chart-container"></div>

Answer 1

如果你想自动调整所有节点内容的大小:

#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 是所有节点的基类，因此您只需添加 width:auto。无需使用 .orgchart .bioinformatics。

我在CodePen中留下了一个例子:https://codepen.io/elopezp/pen/jONrWbN

希望对您有所帮助=)。