tree map - styles

3Overview

TREE MAP 의 전반적인 스타일에 대한 값을 정의

var defaultStyles = {
	layout : {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingLeft : 10,
		paddingRight : 10,
		paddingTop : 10,
		paddingBottom : 10
	},
	animate : {
    	use : true,
		delay : 50,
    	type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
    	speed : 200				     	
    },
    label : {
    	position : {
    		x : 3,
    		y : 3
    	},
    	area : {
    		color : '#fff',
    		opacity: 1,
    		paddingTop : 3,
    		paddingBottom : 3,
    		paddingLeft : 3,
    		paddingRight : 3
    	},
    	line : {
    		color : '#dad9d8',
    		width : 1,
    		opacity : 1
    	},
    	text: {
            family: 'Nanum Gothic', 
            size: 13, 
            color: '#000', 
            style: 'normal', 	/* normal | italic */
            weight: 'bold',	/* normal | bold */
            opacity: 1
        }
    },
	group : {
		line : {
    		width : 3,
    		color : '#f8f8f8'
		},
		hover : {
			use : false,
			color : '#fff',
			opacity : 0.3
		}
	},
	item : {
		line : {
			width : 2,
			color : '#f8f8f8'
		},
		area : {
			color : [
                '#ff625f', '#f69493', '#ffd3d3', '#ffffff',
				'#bee1f0', '#61b8e1', '#0093d8'
			],
			opacity : 1					
		},
		hover : {
			line : {
				color: '#3a464f', 
          		width: 4,
          		opacity : 1
			},
			area : {
				opacity: 0,
            	color : '#fff'
			}
		}
	},
	enterGroup : {
		use : false,
		animate : {
			use : false,
			speed : 300,
			type : 'linear' /* linear|>|<|<>|bounce|elastic|backln|backOut */
		},
		interFace : {
			animate : {
				use : false,
				speed : 300,
				type : 'linear' /* linear|>|<|<>|bounce|elastic|backln|backOut */
			},
			group : {
				width : 220,
				line : {
	        		width : 1,
	        		color : '#fff'
				},
				area : {
					color : '#666666',
					opacity : 1
				},
				hover : {
					line : {
						color: '#fff', 
	              		width: 1,
	              		opacity : 1
					},
					area : {
						opacity: 1,
		            	color : 'ff0000'
					}
				}
			},
			button : {
				width : 30,
				height : 30,
				back : {
					src : '../img/treemap_backBtn.png' 		
				},
				toggle : {						
					open : {
						src : '../img/treemap_upBtn.png'
					},
					close : {
						src : '../img/treemap_downBtn.png'	
					}
				}
			},
			base : {	
				paddingTop : 0,					
	            line : {
	        		width : 3,
	        		color : '#000'
				},
				area : {
					color : '#fff',
					opacity : 1
				}
			},
			text : {
				family: 'dotum', 
                size: 13, 
                color: '#000', 
                align: 'right',		/* left | center | right */
                style: 'normal', 	/* normal | italic */
                weight: 'normal',	/* normal | bold */
                opacity: 1
			}
		}
	}	
};

Configuration Styles

layout

SVG 전체 영역 스타일

Parameters

			defalult	type	설명
layout	paddingTop		10	number	SVG 전체 영역의 상단 여백
	paddingBottom		10	number	SVG 전체 영역의 하단 여백
	paddingLeft		10	number	SVG 전체 영역의 좌측 여백
	paddingRight		10	number	SVG 전체 영역의 우측 여백
	area	color	'#f8f8f8'	string	SVG 전체 영역의 배경 색상
	line	color	'#eaeaea'	string	SVG 전체 영역의 테두리 색상
	line	width	1	number	SVG 전체 영역의 테두리 두께

Usage

var styles = {
	layout: {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingTop : 30,
		paddingBottom : 30,
		paddingLeft : 30,
		paddingRight : 30
	}
}

Demo

Publisher Go

animate

Tree Map 의 애니메이션

Parameters

		default	type	설명
animate	use	true	boolean	Tree Map 의 애니메이션 사용 여부 ( 'true' or 'false' )
	delay	50	number	flag 별로 나누어진 그룹이 순차적으로 나타낼때 그룹 별로 나타나는 시간 차이 ( 0 ~ )
	type	'bounce'	string	Tree Map 의 애니메이션 타입 ( 'linear' or '>' or '<' or '<>' or 'bounce' or 'elastic' or 'backIn' or 'backOut' )
	speed	200	number	애니메이션 속도 ( 0 ~ )

Usage

var styles = {
	animate: {
		use : true,
		delay : 50,
		type : 'linear',
		speed : 200
	}
}

Demo

Publisher Go

label

Tree Map 의 그룹 또는 아이템의 데이터 정보가 Label 형식의 TEXT 로 표현

label.position

Label 형식 TEXT 의 위치

Parameters

			default	type	설명
label	position	x	3	number	Label 형식 TEXT 의 X 축 위치
label	position	y	3	number	Label 형식 TEXT 의 Y 축 위치

Usage

var styles = {
	label: {
		position : {
			x : 3,
			y : 3
		}
	}
}

Demo

Publisher Go

label.area

Label 형식의 TEXT 를 감싸는 테두리의 면

Parameters

			default	type	설명
label	area	color	'#fff'	number	면 색상 (영문컬러명이나 RGB값 입력)
		opacity	1	number	면 투명도 (0 ~ 1)
		paddingTop	3	number	label 의 상단 여백
		paddingBottom	3	number	label 의 하단 여백
		paddingLeft	3	number	label 의 좌측 여백
		paddingRight	3	number	label 의 우측 여백

Usage

var styles = {
	label: {
		area : {
			color : '#fff',
			opacity : 1,
			paddingTop : 3,
			paddingBottom : 3,
			paddingLeft : 3,
			paddingRight : 3
		}
	}
}

Demo

Publisher Go

label.line

Label 형식의 TEXT 를 감싸는 테두리의 선

Parameters

			default	type	설명
label	line	color	'#fff'	number	선 색상 (영문컬러명이나 RGB값 입력)
		width	1	number	선 두께 ( 0 ~ )
		opacity	1	number	선 투명도 (0 ~ 1)

Usage

var styles = {
	label: {
		line : {
			color : '#fff',
			width : 0,			
			opacity : 1
		}
	}
}

Demo

Publisher Go

label.text

Label 의 TEXT

Parameters

			default	type	설명
lable	text	family	'Nanum Gothic'	string	글꼴 종류 이름 ( 영문명 )
		size	13	number	글꼴 크기 ( px 단위 )
		color	'#000'	string	글꼴 색상 ( 영문 색상명 혹은 RGB값 )
		style	'normal'	string	글꼴 모양 ( 'normal' or 'italic')
		weight	'bold'	string	글꼴 두께 ( 'normal' or 'bold' )
		opacity	1	number	글꼴 투명도 ( 0 ~ 1 )

Usage

var styles = {
	label: {
		text : {
			family: 'dotum', 
			size: 11, 
			color: '#000', 
			style: 'normal', 	/* normal | italic */
			weight: 'normal',	/* normal | bold */
			opacity: 1
		}
	}
}

Demo

Publisher Go

group

Tree Map 의 그룹 스타일

Parameters

			default	type	설명
group	line	color	'#f8f8f8'	string	그룹의 선 색상 (영문컬러명이나 RGB값 입력)
	line	width	3	number	그룹의 선 두께 ( 0 ~ )
	hover	use	false	boolean	그룹의 마우스 오버시 hover 이벤트 사용 여부 ( 'true' or 'false' )
		color	'#000'	string	마우스 오버시 그룹의 면 색상 변경 (영문컬러명이나 RGB값 입력)
		opacity	0.3	number	마우스 오버시 그룹의 면 투명도 변경 ( 0 ~ 1 )

Usage

var styles = {
	group : {
		line : {
    		width : 3,
    		color : '#fff'
		},
		hover : {
			use : false,
			color : '#fff',
			opacity : 0.3
		}
	}
}

Demo

Publisher Go

item

Tree Map 의 아이템 스타일

Parameters

				default	type	설명
item	line	color		'#f8f8f8'	string	아이템의 선 색상 (영문컬러명이나 RGB값 입력)
	line	width		2	number	아이템의 선 두께 ( 0 ~ )
	area	color		['#ff625f', '#f69493', '#ffd3d3', '#ffffff', '#bee1f0', '#61b8e1', '#0093d8']	array	아이템의 면 색상 (영문컬러명이나 RGB값 입력) 옵션의 flag 값의 단계에 따라 색상 추가 ( flag 가 1~7 일 경우 색상 갯수는 7개 )
	area	opacity		1	number	아이템의 면 투명도 ( 0 ~ 1 )
	hover	line	color	'#3a464f'	string	아이템마우스 오버시 item 의 선 색상 (영문컬러명이나 RGB값 입력)
		line	width	4	number	아이템마우스 오버시 item 의 선 두께 ( 0 ~ )
		area	color	'#fff'	string	마우스 오버시 아이템의 면 색상 (영문컬러명이나 RGB값 입력)
		area	opacity	0	number	마우스 오버시 아이템의 면 투명도 ( 0 ~ 1 )

Usage

var styles = {
	item : {
		line : {
			width : 1,
			color : '#fff'
		},
		area : {
			color : [
				'#ff625f', '#f69493', '#ffd3d3', '#ffffff',
				'#bee1f0', '#61b8e1', '#0093d8'
			],
			opacity : 1					
		},
		hover : {
			line : {
				color: '#fff', 
          		width: 1,
	      		opacity : 1
			},
			area : {
				opacity: 0,
	           	color : '#fff'
			}
		}
	}
}

Demo

Publisher Go

enterGroup

그룹을 자세히 나타내기 위해 마우스 클릭 시 해당 그룹을 확대하여 해당 그룹의 아이템 정보를 상세히 알 수 있다.

enterGroup.use

enterGroup 의 사용 여부

Parameters

		default	type	설명
enterGroup	use	false	boolean	enterGroup 의 사용 여부

Usage

var styles = {
	enterGroup : {
		use : true
	}
}

Demo

Publisher Go

enterGroup.animate

enterGroup 의 애니메이션 사용 여부

Parameters

			default	type	설명
enterGroup	animate	use	false	boolean	enterGroup 의 애니메이션 사용 여부 ( 'true' or 'false' )
speed	300	number	애니메이션 속도 ( 0 ~ )
type	'linear'	string	애니메이션 타입 ( 'linear' or '>' or '<' or '<>' or 'bounce' or 'elastic' or 'backIn' or 'backOut' )

default

type

설명

enterGroup

animate

use

false

boolean

enterGroup 의 애니메이션 사용 여부 ( 'true' or 'false' )

speed

300

number

애니메이션 속도 ( 0 ~ )

type

'linear'

string

애니메이션 타입

( 'linear' or '>' or '<' or '<>' or 'bounce' or 'elastic' or 'backIn' or 'backOut' )

Usage

var styles = {
	enterGroup : {
		animate : {
			use : true,            
			speed : 300,
            type : 'linear' /* linear|>|<|<>|bounce|elastic|backln|backOut */
		}
	}
}

Demo

Publisher Go

enterGroup.interFace

enterGroup 사용시 그룹을 클릭하였을 경우 그룹이 확대 됨과 동시에 나타나는 인터페이스의 스타일

Parameters

						default	type	설명
enterGroup	interFace	animate	use			false	boolean	인터페이스의 애니메이션 사용 여부 ( 'true' or 'false' )
			speed			300	number	애니메이션 속도 ( 0 ~ )
			type			'linear'	string	애니메이션 타입 ( 'linear' or '>' or '<' or '<>' or 'bounce' or 'elastic' or 'backIn' or 'backOut' )
		group	width			220	number	인터페이스 그룹의 넓이 ( 0 ~ )
			line	width		1	number	그룹의 선 두께 ( 0 ~ )
			line	color		'#fff'	string	그룹의 선 색상 (영문컬러명이나 RGB 값 입력)
			area	color		'#666666'	string	그룹의 면 색상 (영문컬러명이나 RGB 값 입력)
			area	opacity		1	number	그룹의 면 투명도 ( 0 ~ 1 )
			hover	line	color	'#fff'	string	그룹에 hover 이벤트 발생시 선 색상 (영문컬러명이나 RGB 값 입력)
					width	1	number	그룹에 hover 이벤트 발생시 선 두께 ( 0 ~ )
					opacity	1	number	그룹에 hover 이벤트 발생시 선 투명도( 0 ~ 1 )
				area	color	'#ff0000'	string	그룹에 hover 이벤트 발생시 면 색상 (영문컬러명이나 RGB 값 입력)
				area	opacity	1	number	그룹에 hover 이벤트 발생시 면 투명도( 0 ~ 1 )
		button	width			30	number	인터페이스에 적용되는 버튼의 넓이
			height			30	number	인터페이스에 적용되는 버튼의 높이
			back	src		'../img/treemap_backBtn.png'	string	인터페이스에서 뒤로가기 버튼의 url
			toggle	open	src	'../img/treemap_upBtn.png'	string	인터페이스의 열기 버튼 url
			toggle	close	src	'../img/treemap_downBtn.png'	string	인터페이스의 닫기 버튼 url
		base	paddingTop			0	number	인터페이스의 그룹의 배경 면의 상단 여백 ( 0 ~ )
			line	width		3	number	인터페이스의 그룹의 배경 선의 두께 ( 0 ~ )
			line	color		'#fff'	string	인터페이스의 그룹의 배경 선의 색상 (영문컬러명이나 RGB 값 입력)
			area	color		'#fff'	string	인터페이스의 그룹의 배경의 면 색상 (영문컬러명이나 RGB 값 입력)
			area	opacity		1	number	인터페이스의 그룹의 배경의 면 투명도 ( 0 ~ 1 )
		text	family			'dotum'	string	인터페이스의 그룹 정보를 포함한 TEXT, 글꼴 종류 이름 ( 영문명 )
			size			11	number	글꼴 크기 ( px 단위 )
			color			'#000'	string	글꼴 색상 ( 영문 색상명 혹은 RGB값 )
			align			'right'	string	인터페이스 내에서 텍스트 align ( 'left' or 'right' or 'center' )
			style			'normal'	string	글꼴 모양 ( 'normal' or 'italic')
			weight			'normal'	string	글꼴 두께 ( 'normal' or 'bold' )
			opacity			1	number	글꼴 투명도 ( 0 ~ 1 )

Usage

var styles = {
	enterGroup : {
		interFace : {
			animate : {
				use : true,
				speed : 300,
				type : 'linear' /* linear|>|<|<>|bounce|elastic|backln|backOut */
			},
			group : {
				width : 220,
				line : {
    				width : 1,
   		 			color : '#fff'
				},
				area : {
					color : '#666666',
					opacity : 1
				},
				hover : {
					line : {
						color: '#fff', 
          				width: 1,
	          			opacity : 1
					},
					area : {
						opacity: 1,
  	    	      		color : 'ff0000'
					}
				}
			},
			button : {
				width : 30,
				height : 30,
				back : {
					src : '../img/treemap_backBtn.png' 		
				},
				toggle : {						
					open : {
						src : '../img/treemap_upBtn.png'
					},
					close : {
						src : '../img/treemap_downBtn.png'	
					}
				}
			},
			base : {	
				paddingTop : 0,					
	        	line : {
    				width : 3,
	    			color : '#000'
				},
				area : {
					color : '#fff',
					opacity : 1
				}
			},
			text : {
				family: 'dotum', 
	        	size: 13, 
		        color: '#000', 
	    	    align: 'right',		/* left | center | right */
    	    	style: 'normal', 	/* normal | italic */
	        	weight: 'normal',	/* normal | bold */
		        opacity: 1
			}
		}
	} 
}

Demo

Publisher Go