Диаграмма Treemap отображает иерархические данные в виде набора вложенных прямоугольников. Каждая ветвь дерева представляется прямоугольником, который затем разбивается на меньшие прямоугольники, представляющие подветви. Размер каждого прямоугольника точно пропорционален его числовому значению, что делает его отличным выбором для преобразования текста в диаграмму при сравнении частей целого в сложных категориях.
Базовая структура синтаксиса
Каждая диаграмма Treemap начинается с treemap-beta объявления. Затем вы объявляете структурные родительские узлы с использованием имен в кавычках, а также отображаете отдельные дочерние листовые узлы, группируя их под родительскими с помощью стандартных отступов и добавляя двоеточие, за которым следует их числовая весовая характеристика.
treemap-beta
"Основное название категории"
"Подкатегория A": 45
"Подкатегория B": 30
"Подкатегория C": 25
Справочник по синтаксису
В таблице ниже приведены основные требования к форматированию, используемые для создания макета диаграммы Treemap в Mermaid.js.
| Компонент | Описание | Правило синтаксиса |
|---|---|---|
| Объявление | Инициализирует механизм структуры макета для вложенных прямоугольных наборов данных. | treemap-beta |
| Родительский узел | Определяет границу группировки или родительскую категорию. Текст всегда должен быть заключен в двойные кавычки. | "Облачная инфраструктура" |
| Листовой узел | Вложенный элемент данных, несущий определённую весовую характеристику значения. | Отступается под родительским узлом с использованием двоеточия в конце и положительного числа. |
| Иерархические данные | Определяет, какие элементы относятся к конкретным группам, с использованием глубины текста. | Управляется исключительно с помощью стандартных уровней отступов (пробелы или табуляция). |
Расширенная форматировка данных (прямые указания)
По умолчанию Mermaid отображает исходные числовые значения. Однако вы можете передать блок конфигурации в начале документа с помощью valueFormat свойство для форматирования чисел как валюты, десятичных дробей или процентов.
Общие шаблоны форматирования
| Строка формата | Тип результата | Пример вывода |
|---|---|---|
'$0,0' |
Знак доллара с стандартным разделителем тысяч. | $400,000 |
'.1f' |
Отображает число с точностью до одного десятичного знака. | 45.2 |
'.1%' |
Преобразует исходное значение веса в отображение в процентах. | 35.4% |
Шаблон финансовых данных
Этот шаблон демонстрирует, как форматировать операционный корпоративный бюджет с использованием пользовательских параметров строк финансового формата:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Корпоративный бюджет"
"Операции инженерии"
"Основная инфраструктура": 500000
"Инструменты разработки": 150000
"Рост маркетинга"
"Платные рекламные кампании": 350000
"Спонсорство мероприятий": 80000
Пользовательская стилизация узлов (классы)
Чтобы выделить критические узлы, выбросы или области с высоким риском в вашей документации, вы можете определять и применять пользовательские стили CSS непосредственно внутри блока кода с помощьюclassDef правил.
treemap-beta
"Использование системных ресурсов"
"Веб-сервисы"
"Шлюз API": 45
"Сервис аутентификации": 95:::critical
"Хранилище баз данных"
"Кэш основной БД": 60
"Узлы синхронизации реплик": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Совет по синтаксису: Чтобы применить определение класса к листовому узлу, содержащему числовое значение, добавьте имя класса, используя три двоеточия (:::className) сразу после имени метки, но *до* разделителя значения двоеточия.
Распространенные ошибки синтаксиса и ограничения
Поскольку схема древовидной карты использует структурную отступку текста, незначительные ошибки форматирования могут привести к проблемам отображения макета. Помните об этих параметрах:
- Отрицательные значения запрещены:Древовидные карты полагаются на пропорциональное заполнение пространства и математически неспособны отображать отрицательные числа или нулевые веса. Убедитесь, что все значения данных являются положительными целыми числами или десятичными дробями.
- Ограничение кавычками: Описание каждого узла — независимо от того, является ли он родительской ветвью или крошечным листовым элементом — должно быть аккуратно заключено в двойные кавычки. Пропуск кавычек приводит к немедленным синтаксическим ошибкам.
- Единообразие пробелов: Вложенные отношения родитель-ребёнок определяются исключительно количеством пробелов в начале строки. Придерживайтесь единых правил использования табуляции или пробелов (например, два пробела на уровень), чтобы избежать попадания узлов в неправильную группу.
- Видимость меток: Очень маленькие значения в глубоких иерархических структурах могут привести к появлению крошечных прямоугольных элементов, где текст выходит за границы или становится полностью непонятным. Рассмотрите возможность объединения мелких элементов в категорию «Другое».