React 트리맵

    Ignite UI for React 계층적(트리 구조) 데이터를 중첩된 노드 집합으로 표시합니다. 트리의 각 브랜치에는 트리맵 노드가 주어지며, 그런 다음 하위 브랜치를 나타내는 더 작은 노드로 타일링됩니다. 각 노드의 사각형은 데이터의 지정된 차원에 비례하는 면적을 갖습니다. 종종 노드는 데이터의 별도 차원을 표시하기 위해 색상이 지정됩니다.

    React Treemap Example

    다음 예IgrTreemap 시에서는 총 면적 기준으로 세계에서 가장 큰 30개국을 보여줍니다.

    Treemap Recommendations

    Are React Treemaps right for your project?

    색상과 크기 차원이 어떤 방식으로든 트리 구조와 연관되어 있으면 다른 방식으로는 발견하기 어려운 패턴을 쉽게 볼 수 있습니다. 트리맵의 두 번째 장점은 구성을 통해 공간을 효율적으로 사용할 수 있다는 것입니다. 결과적으로 수천 개의 항목을 화면에 동시에 읽기 쉽게 표시할 수 있습니다.

    • 트리맵은 데이터 요소를 분류하고 값의 상대적인 차이를 제대로 전달하지 못하는 원형 차트나 기타 영역형 차트보다 더 효과적입니다.
    • 트리맵은 드릴다운 시나리오를 위해 설계되었습니다. 보다 효율적인 데이터 분석을 위해 더 작은 직사각형으로 표시되는 데이터 세트를 지속적으로 드릴다운할 수 있습니다.
    • 트리맵은 숫자 수량을 전달하도록 설계되지 않았습니다. 목적은 상대 순위를 표시하는 것입니다.

    다른 데이터 시각화와 마찬가지로 트리맵 차트 시각화는 특정 시나리오에서 사용해야 합니다. 바 차트 나 선형 차트와 같은 시각화와 동일한 문제는 해결되지 않습니다. 실제로는 더 복잡하고 풍부한 데이터 표시를 위한 것입니다.

    Treemap Use Cases

    트리맵을 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다. 때를:

    • 드릴다운 계층적 데이터(분기 및 하위 분기가 있는 트리로 구성된 데이터)가 있습니다.
    • 범주(분기)와 하위 범주(하위 분기) 간의 상대 가중치 및 비교 값의 계층 구조를 설명하려고 합니다.
    • 컴팩트하고 공간 효율적인 시각화가 필요한 대규모 데이터 세트를 표시하고 싶습니다.
    • 정확한 값 없이도 한눈에 보이는 빠른 데이터 분석을 제공하고 싶습니다. 직사각형의 상대적 크기는 패턴 및/또는 이상값을 매우 빠르게 식별하는 데 도움이 됩니다.
    • 공간을 효율적으로 활용하고 싶습니다. 트리맵은 수천 개의 항목을 화면에 동시에 읽기 쉽게 표시할 수 있습니다.

    When not to Use a Treemap

    • 정확한 값이 필요한 데이터 스토리를 전달하고 있습니다.
    • 음수 데이터 값이 있습니다.
    • 평면적이고 비계층적인 데이터가 있습니다.
    • 데이터 크기가 비슷합니다.

    Treemap Data Structure

    • 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
    • 데이터 소스에는 데이터 항목이 하나 이상 포함되어야 합니다. 그렇지 않으면 지도가 노드를 렌더링하지 않습니다.
    • 모든 데이터 항목에는 최소 하나의 데이터 열(예: 문자열)이 포함되어야 하며labelMemberPath, 이 열은 속성에 매핑되어야 합니다.
    • 모든 데이터 항목에는 최소 하나의 숫자 데이터 열이 있어야 하며, 이 열은 속성valueMemberPath으로 매핑되어야 합니다.
    • 데이터를 조직된 타일로 분류하려면 선택적으로 andparentIdMemberPath를 사용할idMemberPath 수 있습니다.

    React Treemap Configuration

    다음 예시에서 트리맵은 와layoutType 속성을 수정layoutOrientation 하여 알고리즘 구조를 변경할 수 있음을 보여줍니다.

    Layout Types

    트리맵 차트는 데이터의 상대적 가중치를 표시합니다. 다양한 알고리즘을 사용하여 데이터 항목의 레이아웃이 어떻게 발생해야 하는지 결정하는 데 도움을 줍니다.

    • SliceAndDiced- 레이아웃 알고리즘은 종횡비를 희생하여 초기 순서를 보존하는 것을 목표로 합니다.
    • Squarified- 레이아웃 타일링 알고리즘은 더SliceAndDice 나은 종횡비를 가지며, 스쿼리파이드보다 더 나은 순서를 유지합니다.
    • Stripped- 레이아웃 타입 알고리즘은 최적의 종횡비를 얻지만, 객체는 크기에 따라 배열됩니다.

    트리맵을 사용하면 요구 사항에 가장 적합한 알고리즘을 선택할 수 있으며 기본적으로 Squarified 방법을 사용합니다. 또한 다음 두 가지 메커니즘을 사용하여 노드에 색상을 지정할 수 있는 기능도 포함되어 있습니다.

    • 유사한 값으로 항목에 색상을 지정하는 그룹 기반 메커니즘
    • 해당 값을 기준으로 노드 색상을 매핑하는 맵 등치와 유사한 축척 기반 메커니즘입니다.

    Layout Orientation

    layoutOrientation속성은 사용자가 계층 구조의 노드들이 확장될 방향을 설정할 수 있게 해줍니다.

    이 속성은layoutOrientation SliceAndDice와 Strip 레이아웃 타입과 함께 작동한다는 점에 유의하세요.

    • Horizontal– 자식 노드들은 수평으로 쌓일 것입니다(SliceAndDice).
    • Vertical– 자식 노드들은 수직으로 쌓일 것입니다(SliceAndDice).

    React Treemap Styling

    다음 예시에서 트리맵은 이벤트를NodeStylingScript 스타일링하여 노드의 외관과 느낌을 변경할 수 있는 능력을 보여줍니다.

    React Treemap Highlighting

    다음 예시에서 트리맵은 노드 하이라이트 기능을 보여줍니다. 이 기능에는 두 가지 옵션이 있습니다. 각 노드는 불투명도를 낮춰 개별적으로 밝게 하거나, 다른 모든 노드가 동일한 효과를 유발하도록 할 수 있습니다. 이 기능을 활성화하려면 Brighten 또는 FadeOthers로 설정highlightingMode 하세요.

    React Treemap Percent based highlighting

    • highlightedDataSource: 하이라이트된 값을 읽을 데이터소스를 지정합니다. null이라면 ItemsSource 속성에서 하이라이트된 값들을 읽습니다.
    • highlightedValueMemberPath: 하이라이트된 값이 읽히는 데이터소스의 속성 이름을 지정합니다.
    • highlightedValueOpacity: 강조된 값 뒤에 있는 정상 값의 불투명도를 제어합니다.
    • highlightedValuesDisplayMode: 강조된 값을 활성화하거나 비활성화합니다.
      • 자동: 트리맵이 사용할 모드를 결정합니다.
      • 오버레이: 트리맵은 일반 값 위에 강조 표시된 값을 표시하고 일반 값에 약간의 불투명도를 적용합니다.
      • 숨김: 트리맵에 강조 표시된 값이 표시되지 않습니다.

    Additional Resources

    다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.