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

Question

我正在使用 OrgChart 绘制 tree-like 结构。当出现长字符串时，默认字符串文本将被截断（例如 Biostatistics 和 Bioinformatics Core）。

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

[重现问题]

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

如果要auto-resize所有节点的内容：

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

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

希望对您有所帮助 =)。

Answer 2

尝试覆盖 google 组织结构图的 .google-visualization-orgchart-table class。

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

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

这对我有用。

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

Best way to increase width to nodes with OrgChart

html

javascript

css

orgchart