Лучший способ увеличить ширину узлов с OrgChart

Question

Я использую OrgChart для рисования древовидных структур.Текст строки по умолчанию будет обрезан при появлении длинной строки (например, Ядро биостатистики и биоинформатики ).

Моя идея таковаизменить свойство width из .orgchart .bioinformatics в файле CSS.Однако, если в моем кластере есть дюжина узлов, я не хочу вручную настраивать ширину каждого узла.

Как я могу автоматически увеличить ширину узлов, чтобы отобразить длинный текст?

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

Попробуйте стили:

 .orgchart .node {
 width: 250px;
 }

Надеюсь, это поможет =).