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

Question

我使用OrgChart绘制类似树的结构。当长字符串出现时，默认的字符串文本将被截断(例如，生物统计和生物信息学核心)。

​

​

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

复制问题

​

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

希望它能有所帮助。

Answer 2

尝试重写google orgchart的.google-visualization-orgchart-table类。

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

但是，上面的代码将增加组织结构图中所有节点的宽度。

这对我有用。