Treemap

Treemap

Treemap Chart를 생성, 관리하는 클래스

ChartJS에서 지원하지 않는 타입의 차트라 직접 만들어줌

Constructor

new Treemap(option, data)

Treemap차트에서 필요한 값들을 설정
Parameters:
Name Type Description
option object 차트 생성에 필요한 옵션
data object 차트 생성에 필요한 데이터
Source:

Classes

Container

Members

animating :boolean

현재 애니메이션 진행중 여부
Source:

animation :boolean

Treemap Animation 여부
Source:

data :object

차트 데이터
Source:

deletableDepth :array

지워줘야 할 오브젝트 저장
Source:

depth :number

현재 Treemap 깊이
Source:

drawTreemapSeparatelyDistance :number

새로운 요소들이 펼쳐지면서 각각이 온전한 상태로 변하는 길이
Source:

drawTreemapSeparatelyDuration :number

새로운 요소들이 펼쳐지면서 각각이 온전한 상태로 변하는 시간
Source:

drawTreemapWithAnimationDuration :number

한단계 더 들어가서 새로운 Treemap 요소들이 펼쳐지는 시간
Source:

expandDuration :number

Treemap 한단계 더 깊이 들어갈 때 펼쳐지는 효과 시간
Source:

expandInformation :array

펼쳐지는 Treemap 요소 정보를 저장
Source:

pixi :PIXI

PIXI 오브젝트
Source:

rootSize :object

최상단 DOM 사이즈
Source:

tooltip :Tooltip

Treemap 차트에서 사용 될 Tooltip 오브젝트
Source:

unit :string

값의 단위
Source:

Methods

calculateRatio()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

calculateTreemap(datas)

Treemap의 데이터를 통해 그려야할 영역을 계산
Parameters:
Name Type Description
datas object Treemap의 데이터
Source:

deleteDepth()

Treemap의 깊이 레벨이 한단계 낮춰줌
Source:

drawTreemap(calculatedData, originalDatas)

calculateTreemap 함수를 통해 계산된 데이터를 가지고 Treemap을 그려줌
Parameters:
Name Type Description
calculatedData object 계산된 Treemap 영역 데이터
originalDatas object Treemap 오리지널 데이터
Source:

drawTreemapSeparately(object, datas, visible)

애니메이션 효과와 함께 Treemap을 나타낼 때 개별적으로 Treemap 요소를 그려주기 위해 셋팅
Parameters:
Name Type Description
object object Treemap 개별 요소의 오브젝트
datas object Treemap 요소 데이터
visible objects 1 = show , -1 = hide
Source:

drawTreemapSeparatelyUpdate(object, datas, startTime, interval, visible)

애니메이션 효과와 함께 Treemap을 나타낼 때 개별적으로 Treemap 요소를 그려줌
Parameters:
Name Type Description
object object Treemap 개별 요소의 오브젝트
datas object Treemap 요소 데이터
startTime date 시작 시간
interval number setInterval 인덱스
visible objects 1 = show , -1 = hide
Source:

drawTreemapWithAnimation(calculatedData, originalDatas)

애니메이션 효과와 함께 Treemap을 나타내기 위해 초기값을 설정하고 drawTreemapWithAnimationUpdate 함수를 실행시켜줌
Parameters:
Name Type Description
calculatedData object 계산된 Treemap 영역 데이터
originalDatas object Treemap 오리지널 데이터
Source:

drawTreemapWithAnimationUpdate(calculatedData, originalDatas, colorIndex, objectsArray)

애니메이션 효과와 함께 Treemap을 나타내줌
Parameters:
Name Type Description
calculatedData object 계산된 Treemap 영역 데이터
originalDatas object Treemap 오리지널 데이터
colorIndex number 색상 인덱스
objectsArray object 오브젝트를 담을 배열
Source:

expand(square, color)

Treemap의 깊이 레벨이 높아질 때 요소를 확대시켜주기 위해 데이터 셋팅
Parameters:
Name Type Description
square object 요소 사각형 정보
color number 색상 값
Source:

expandUpdate(square, color, background, mode)

Treemap의 깊이 레벨이 높아질 때 요소를 확대/축소
Parameters:
Name Type Description
square object 요소 사각형 정보
color number 색상 값
background Graphics 요소를 그려주는 Graphics 오브젝트
mode number 확대 or 축소
Source:

flattenTreemap()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

getSumOfChildrenData(object)

자신과 자식들의 데이터 총합을 구해줌
Parameters:
Name Type Description
object object 데이터 오브젝트
Source:

hideTreemapWithAnimation(calculatedData, originalDatas, objects)

애니메이션 효과와 함께 Treemap을 숨기기 위해 초기값을 설정하고 hideTreemapWithAnimationUpdate 함수를 실행시켜줌
Parameters:
Name Type Description
calculatedData object 계산된 Treemap 영역 데이터
originalDatas object Treemap 오리지널 데이터
objects objects drawTreemapWithAnimationUpdate에서 담아두었던 오브젝트들
Source:

hideTreemapWithAnimationUpdate(calculatedData, originalDatas, objects)

애니메이션 효과와 함께 Treemap을 숨김
Parameters:
Name Type Description
calculatedData object 계산된 Treemap 영역 데이터
originalDatas object Treemap 오리지널 데이터
objects objects drawTreemapWithAnimationUpdate에서 담아두었던 오브젝트들
Source:

improvesRatio()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

normalize()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

reduce()

Treemap의 깊이 레벨이 낮아질 때 확대되었던 요소를 축소시켜줌
Source:

squarify()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

sumArray()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

sumMultidimensionalArray()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

treemapMultidimensional()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source:

treemapSingledimensional()

Treemap-squared에서 가져옴

Gamify에 맞게 변형

Source: