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

#javascript #html #css #orgchart

#javascript #HTML #css #orgchart

Вопрос:

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

Моя идея состоит в том, чтобы изменить свойство width of .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>

Expand snippet

Ответ №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

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

1. Этот метод увеличит ширину всех узлов. Ожидаемый результат должен автоматически изменять ширину всех узлов, но не отображать усеченные текстовые строки.

2. @PennyLiu Я обновил свой ответ. Вы должны добавить базовый стиль .orgchart .node и переопределить его в биоинформатике вашего контента. С уважением

3. Спасибо за ваш ответ. Если у меня в кластере дюжина узлов , то я должен добавить к нему множество дополнительных имен классов (например, bioinformatics ), чтобы изменить размер ячейки. Есть ли какой-нибудь трюк, при котором мне не нужно устанавливать какие-либо имена классов, но изменять их размер?

4. В этом случае просто оставьте .orgchart .node style со свойством «width: auto», удалите все пользовательские классы, такие как биоинформатика, и все. У меня это сработало.

5. Я забыл добавить !important в class .orgchart .node . Также вы можете использовать nodeTemplate вместо NodeContent , я оставил этот код в codepen, просто закомментируйте NodeContent и раскомментируйте nodeTemplate. С уважением, man.

Ответ №2:

Попробуйте переопределить .google-visualization-orgchart-table класс Google orgchart.

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

Но приведенный выше код увеличит ширину всех узлов в orgchart.

У меня это сработало.