Wykres drzewa wyświetla dane hierarchiczne jako zestaw zagnieżdżonych prostokątów. Każda gałąź drzewa reprezentowana jest prostokątem, który następnie jest wyłożony mniejszymi prostokątami przedstawiającymi podgałęzie. Wielkość każdego prostokąta jest doskonale proporcjonalna do jego wartości liczbowej, co czyni go doskonałym wyborem do przekształcania tekstu na wykres przy porównywaniu części całości w złożonych poziomach kategorii.
Podstawowa struktura składni
Każdy wykres drzewa zaczyna się od treemap-beta deklaracji. Następnie deklarujesz węzły nadrzędne strukturalne przy użyciu nazw w cudzysłowach, a indywidualne liście potomne mapujesz, grupując je pod nimi za pomocą standardowych wcięć i dodając dwukropek, a następnie ich wartości liczbowej.
treemap-beta
"Główna nazwa kategorii"
"Podkategoria A": 45
"Podkategoria B": 30
"Podkategoria C": 25
Odwołanie składniowe
Poniższa tabela rozkłada podstawowe wymagania formatowania używane do tworzenia układu wykresu drzewa w Mermaid.js.
| Składnik | Opis | Zasada składni |
|---|---|---|
| Deklaracja | Inicjuje silnik struktury układu dla zagnieżdżonych zestawów danych prostokątnych. | treemap-beta |
| Węzeł nadrzędny | Określa granicę grupowania lub kategorię nadrzędna. Tekst zawsze musi być otoczony podwójnymi cudzysłowami. | "Infrastruktura chmury" |
| Węzeł liściowy | Zagnieżdżony element danych, który przenosi określoną wagę wartości. | Wcięty pod węzłem nadrzędnym za pomocą dwukropka na końcu i liczby dodatniej. |
| Dane hierarchiczne | Określa, które elementy należą do określonych grup przy użyciu głębi tekstu. | Kontrolowane całkowicie za pomocą standardowych poziomów wcięć (spacje lub tabulatory). |
Zaawansowane formatowanie danych (dyrektywy)
Domyślnie Mermaid wyświetla surowe liczby. Można jednak przekazać blok konfiguracji frontmatter za pomocą valueFormat właściwość do formatowania liczb jako waluty, liczb dziesiętnych lub procentów.
Typowe wzorce formatowania
| Ciąg formatujący | Typ wyniku | Przykładowy wynik |
|---|---|---|
'$0,0' |
Znak dolara z domyślnym separatorem tysięcy. | $400,000 |
'.1f' |
Wyświetla liczbę z dokładnie jednym miejscem po przecinku. | 45.2 |
'.1%' |
Konwertuje surową wartość wagową na wyświetlanie w procentach. | 35.4% |
Szablon danych finansowych
Ten szablon demonstruje sposób formatowania operacyjnego budżetu korporacyjnego przy użyciu niestandardowych parametrów ciągów finansowych:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Budżet korporacyjny"
"Operacje inżynieryjne"
"Infrastruktura podstawowa": 500000
"Narzędzia dla programistów": 150000
"Marketing wzrostu"
"Kampanie reklamowe opłacone": 350000
"Sponsorstwa wydarzeń": 80000
Niestandardowe stylizowanie węzłów (klasy)
Aby wyróżnić kluczowe węzły, odstające wartości lub obszary o wysokim ryzyku w dokumentacji, możesz zdefiniować i zastosować niestandardowe style CSS bezpośrednio w bloku kodu przy użyciuclassDefreguł.
treemap-beta
"Wykorzystanie zasobów systemu"
"Usługi internetowe"
"Brama interfejsu API": 45
"Usługa uwierzytelniania": 95:::critical
"Przechowywanie bazy danych"
"Pamięć podręczną podstawowej bazy danych": 60
"Węzły synchronizacji replik": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Wskazówka składni: Aby zastosować definicję klasy do węzła liściowego zawierającego wartość numeryczną, dołącz nazwę klasy przy użyciu trzech dwukropków (:::className) od razu po nazwie etykiety, ale *przed* separatorem wartości dwukropka.
Typowe błędy składniowe i ograniczenia
Ponieważ schemat treemap wykorzystuje wcięcia tekstu strukturalnego, niewielkie błędy formatowania mogą powodować problemy z renderowaniem układu. Pamiętaj o tych parametrach:
- Wartości ujemne zabronione:Treemap opiera się na wypełnianiu przestrzeni proporcjonalnie i matematycznie nie potrafi wyświetlić liczb ujemnych ani wag równych zero. Upewnij się, że wszystkie wartości danych są dodatnimi liczbami całkowitymi lub dziesiętnymi.
- Zamknięcie w cudzysłowach: Opis każdego węzła — niezależnie od tego, czy jest to gałąź rodzica czy mały element liściowy — musi być dokładnie otoczony podwójnymi cudzysłowami. Pominięcie nawiasów cudzysłowowych powoduje natychmiast błędy składniowe.
- Jednolitość odstępów: Zagnieżdżona relacja rodzic-dziecko jest określana wyłącznie przez liczbę spacji na początku wiersza. Przestrzegaj spójnej zasady długości tabulatora lub odstępów (np. dwie spacje na poziom), aby zapobiec umieszczeniu węzłów w nieprawidłowej grupie.
- Czytelność etykiet: Bardzo małe wartości w głębokich strukturach hierarchicznych mogą prowadzić do małych prostokątnych płytek, gdzie tekst się wypływa lub staje się zupełnie nieczytelny. Rozważ połączenie małych elementów w kategorii „Inne”.