-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathc2i_Std3D.html
739 lines (686 loc) · 35.7 KB
/
c2i_Std3D.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
<!DOCTYPE html>
<html>
<head>
<title>C2i:인포그래픽-표준차트-3D</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="assets/lib/d3.min.js" charset="utf-8"></script>
<script src="assets/lib/three.min.js"></script>
<script src="assets/js/c2i.v2.min.js"></script>
<script src="assets/i18n/c2i_kr.js"></script>
<!-- 다국어 사용시 아래 스크립트 필요합니다. (사용하지 않으면 제거) -->
<!--<script src="../assets/i18n/c2i_en.js"></script>-->
<!--<script src="../assets/i18n/c2i_jp.js"></script>-->
<!--<script src="../assets/i18n/c2i_ch.js"></script>-->
<!-- 정품 인증번호 발급 및 적용시 아래 스크립트 필요합니다. -->
<!--<script src="../assets/c2iLicenseKey.js"></script>-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/c2i.v2.min.css">
<link rel="stylesheet" href="assets/css/demo.css">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<script src="assets/data/infoG/textPosData.js"></script>
<style>
body{
background-color: #474747;
}
#menu .actived {
color: #d5d500;
background-color: rgba(213, 54, 54, 0.75);
}
button:hover {
background-color: rgba(255,255,255,1);
}
button:active {
color: #d5d500;
background-color: rgba(213, 54, 54, 0.5);
}
.txLabel {
color: #e5faa4;
}
.demoLegendLeft {
position:absolute;
top: 0;
left: 20px;
z-index:99
}
.demoLegendRight {
position:absolute;
top: 0;
left: 320px;
z-index:99
}
@media (max-width: 480px) {
.demoLegendLeft {
left: 0;
}
.demoLegendRight {
right: 0;
}
}
.optionPosition{
top: 0;
left: 350px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="menu"></div>
</div>
<div class="col-md-6 c2i4Size">
<a href="index.html#c2iDemo" style="color: white"><div class="btn btn-primary btn-sm">홈</div></a>
<div id="c2iGuide" class="btn btn-primary btn-sm">도움말</div>
<div id="dataChange" class="btn btn-warning btn-sm">데이터 갱신</div>
<div id="dataDecrease" class="btn btn-warning btn-sm">데이터 감소</div>
<div id="rotateDirection" class="btn btn-warning btn-sm">좌우 회전</div>
<label for="autoChange" class='txLabel' title="매 5초 단위 자동 변환">
도형 자동변경(5초)
</label>
<input id="autoChange" type="checkbox" checked style="top: 3px;"/>
<button id="save" class="btn btn-warning btn-sm">익스포트</button>
</div>
</div>
<div id="c2iGuideInfo" class="row c2iHidden c2iGuideInfo">
<div class="container">
<button id="c2iGuideClose" class="btn btn-primary btn-sm float my-float">닫기</button>
<div class="page-header">
<h1 class="text-primary">씨투아이 3D 표준차트 컴포넌트</h1>
<p>동일한 성격의 데이터를 비교하기 좋으며, 시각적으로 3D 기술을 제공하여 화려함을 제공합니다.</p>
</div>
<!-- 데모 따라하기-->
<h3>데모 따라하기</h3>
<div class="row">
<div class="col-md-3">0.모든 곳에서 더블-클릭시 항목 값별 차트정렬</div>
<div class="col-md-8">예: 예산금액 기준으로 내림차순 -> 오름차순 -> 초기순서</div>
</div>
<div class="row">
<div class="col-md-3">1.차트 유형별로 클릭</div>
<div class="col-md-8">유형 변경시 설정된 애니메이션 시간과 이징(easing) 함수 적용</div>
</div>
<div class="row">
<div class="col-md-3">2.데이터 갱신 버튼 클릭</div>
<div class="col-md-8">각 차트별 데이터 랜덤 변경</div>
</div>
<div class="row">
<div class="col-md-3">3.데이터 감소 버튼 클릭</div>
<div class="col-md-8">차트 수 감소</div>
</div>
<div class="row">
<div class="col-md-3">4.도형 자동변경 버튼 클릭</div>
<div class="col-md-8">5초(옵션 설정) 단위로 차트 유형 자동 변경</div>
</div>
<div class="row">
<div class="col-md-3">5.옵션 창: h 키로 토글 뷰 처리</div>
<div class="col-md-8">옵션 임의로 변경해 보기</div>
</div>
<div class="row">
<div class="col-md-3">*.패턴 타입인 경우</div>
<div class="col-md-8">패턴 적용창을 활용하여 위치 지정 가능.(사용법: 클릭 후 마우스 이동시 해당 영역토글 설정, 최종 클릭시 영역설정 종료)</div>
</div>
<!-- 차트 타입-->
<h3>차트 타입</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">차트 유형</th>
<th>주요 내용</th>
<th class="text-center">설정 옵션</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">누적 막대(StackBar)</td>
<td>동일 시리즈 데이터를 누적하여 막대차트 렌더링</td>
<td>yDim: { cluster: 'stackbar' }</td>
</tr>
<tr>
<td class="text-center">누적 막대 100%(StackBar100)</td>
<td>동일 시리즈 데이터의 누적데이터에 대한 백분율 막대차트 렌더링</td>
<td>yDim: { cluster: 'stackbar100' }</td>
</tr>
<tr>
<td class="text-center">그룹바(GroupBar)</td>
<td>동일 시리즈 데이터를 인접하여 막대차트 렌더링</td>
<td>yDim: { cluster: 'groupbar' }</td>
</tr>
<tr>
<td class="text-center">누적 영역바(StackArea)</td>
<td>동일 시리즈 데이터를 누적하여 영역차트 렌더링</td>
<td>yDim: { cluster: 'stackarea' }</td>
</tr>
<tr>
<td class="text-center">누적바 100%(StackArea100)</td>
<td>동일 시리즈 데이터의 누적데이터에 대한 백분율 영역차트 렌더링</td>
<td>yDim: { cluster: 'stackarea100' }</td>
</tr>
<tr>
<td class="text-center">누적바(StackStream)</td>
<td>동일 시리즈 데이터를 누적하여 연속 흐름처럼 레더링</td>
<td>yDim: { cluster: 'stackstream' }</td>
</tr>
</tbody>
</table>
</div>
<!-- 도형 타입-->
<h3>도형 타입</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">도형 타입</th>
<th>주요 내용</th>
<th class="text-center">설정 옵션</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">커브</td>
<td>개별 차트를 상하로 커브를 그리며 시각화하며, 제공 및 설정된 옵션에 따라 수 겹으로 레더링</td>
<td>geometry: { type: 'curve' }</td>
</tr>
<tr>
<td class="text-center">패턴</td>
<td>개별 차트를 문자등의 패턴으로 그리며 시각화. 패턴의 갯수에 따라 자연스러움은 차이 발생</td>
<td>geometry: { type: 'pattern' }</td>
</tr>
<tr>
<td class="text-center">테이블</td>
<td>개별 차트를 테이블 형태로 그리며 시각화하며, 열(컬럼)수에 따라 행은 자동 설정</td>
<td>geometry: { type: 'table' }</td>
</tr>
<tr>
<td class="text-center">구형</td>
<td>개별 차트를 구형으로 그리며 시각화하며, 제공 및 설정된 옵션에 따라 수 겹으로 레더링</td>
<td>geometry: { type: 'sphere' }</td>
</tr>
<tr>
<td class="text-center">나선</td>
<td>개별 차트를 원기둥형의 패턴으로 그리며 시각화. 패턴의 갯수에 따라 자연스러움은 차이 발생</td>
<td>geometry: { type: 'helix' }</td>
</tr>
<tr>
<td class="text-center">그리드</td>
<td>개별 차트를 n차원의 그리드 형태로 그리며 시각화하며, 열(컬럼) & 행의 수에 따라 면은 자동 설정</td>
<td>geometry: { type: 'grid' }</td>
</tr>
</tbody>
</table>
</div>
<!-- 데이터 구조-->
<h3>데이터 구조: csv, tsv , dsv 등의 화일타입 구분은 의미 없음</h3>
<div class="row">
<div class="col-md-1">0.csv</div>
<div class="col-md-11">
<pre><code>
sido,gu,1stYear,2ndYear,3rdYear,4thYear,5thYear
서울,서울본청,320465,319375,318383,323515,329571
서울,서울종로구,4628,4663,4166,3754,3525
서울,서울중구,4259,3979,3953,3837,3990
서울,서울용산구,4112,4241,4317,4433,4535
</code></pre>
</div>
</div>
<div class="row">
<div class="col-md-1">1.json</div>
<div class="col-md-11">
<pre><code>
[
{
"coName": "비투아이랩",
"children": [
{ "year": "2008", "amt_1": 10, "amt_2": 0, "amt_n": 540 },
{ "year": "2009", "amt_1": 20, "amt_2": 30, "amt_n": 440 },
{ "year": "2010", "amt_1": 30, "amt_2": 0, "amt_n": 550 }
]},
{
"name": "소프트다임",
"children": [
{ "year": "2008", "amt_1": 0, "amt_2": 0, "amt_n": 30 },
{ "year": "2009", "amt_1": 0, "amt_2": 0, "amt_n": 220 },
{ "year": "2010", "amt_1": 0, "amt_2": 20, "amt_n": 0 }
]
}
]
</code></pre>
</div>
</div>
<!-- 개발자 코딩 제공 부분 -->
<h3>개발자 코딩 제공 부분</h3>
<p>홈, 도움말, 데이터 갱신 및 감소, 좌우회전, 도형 자동변경은 <strong>개발자가 씨투아이 API등을 활용하여 임의로 코딩</strong>하여 제공한 UI 입니다.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="c2iStd3D" class="stdInfo c2iNoSelect"></div>
<div id="c2iLegendOrdinal" class="c2iLegend c2iNoSelect demoLegendRight"></div>
<div id="c2iLegend" class="c2iLegend c2iNoSelect demoLegendLeft"></div>
</div>
</div>
</div>
<!-- 자동 툴팁 사용시 name, measure는 필수 존재 내역입니다.
Custom Tooltip은 별도 ID로 만들어 사용자가 임의로 프로그램 가능합니다. c2iHidden-->
<div id="tooltip" class="c2iTooltip c2iHidden">
<table style="width:320px">
<thead>
<tr>
<th colspan='4' class="tipHeader">
<div class="c2iCloseBtn" title="닫기">X</div>
<p><strong><span id="name">판매본부</span></strong></p>
<p id="measure" style="font-size: 14px; color:yellow">1,200</p>
<hr style="margin:2px 0px; opacity: 0.5;"> <!-- ratio가 있거나 hr 태그가 존재해야 합니다 -->
<p id="ratio"></p>
<!--<p><span id="testId" style="font-size: 12px; color: orange;">사용자 임의 툴팁 적용시,<br> 제공 데이터로 재구성 가능.</span></p>-->
</th>
</tr>
</thead>
</table>
</div>
<div id="positionGrid" style="position:absolute; top: 90px; left: 15px; z-index:99"></div>
<script>
'use strict';
/*
대.소문자는 반드시 준수해야 합니다.
옵션이 없거나(미정의) '' 이면, 필수요소는 기본값 자동 적용되며 불필요한 옵션은 자동으로 적용되지 않습니다.
*** 공통 정보
-. isResponsive: true, false (기본값: false)
-. width, height : 여기에서는 정수 값을 설정해야 하며, 미 정의시 c2i4Size 클래스가 존재하면
해당 클래스가 존재하는 컨테이너의 넓이를 상속 받으며, 이때 높이 값 없으면
(window.innerHeight - c2i4Size 클래스의 넓이)로 설정합니다.
동 차트는 특히 단일 컴포넌트이지만 많은 차트를 보여주기 때문에 가능하면 큰 영역을 제공할 것을 권장합니다.
-. theme : #efefef, #474747, #333333 (제거: none)
즉 개발자가 임의 색상 지정을 하면 됩니다.
-. lang : 언어 설정(기본값: 'kr')
추가 언어을 생성할 경우 iso2 기반으로 기존 언어 화일을 복사하여 작성하면 됩니다.
-. margin : 표준차트와 동일하나, 개별 노드안의 차트 영역에 적용됩니다.
-. easing : 애니메이션시 적용될 기본 알고리즘(linear,elastic,exp,bounce..)
-. duration: 50~1500 ms(기본값 50), delay: 10~500 ms(기본값 10)
-. preBuildData : 컴포넌트마다 데이터 구조는 상이하나 기본 개념은,
true : 별도의 작업없이 바로 사용 가능한 구조
false: 내부에서 전처리 작업을 하므로 부하가 존재하나 대부분의 경우
무시해도 될 수준이며, false 개념을 지원하는 이유는 개발자 및
데이터 제공 서버의 알고리즘을 용이하게 하기 위함.
-. positionData : 각 노드를 활용하여 패턴을 나타내기 위한 위치 값의 배열 객체.
-. imgFolder : 이미지 화일 보관 폴더 지정.(예: '../assets/images/foods/')
-. isDev : 개발 모드 여부.
.true: 옵션 창에 개발자용 메뉴 표시되며, 실행시 메타옵션 및 로그 정보 표시
*** xDim : x축 정보 제공 용도.(차트를 그릴 경우만 필요, 즉 isHtml=true 경우)
-. caption : x축 제목명
-. unitNm : 백만, 명 등의 서술적 단위명칭
-. colNm : x축 컬럼명
-. scale : ordinal (V3: linear, log, sqrt)
-. format : 정수(,d), 실수(,f 또는 ,.2f), 백분율(% .2%)
-. captionFonts : x축 제목 표시 폰트
-. fonts: x축의 tick 값 표시하기 위한 폰트
-. xPos : x축 제목명이 축의 표시 위치 'left', 'middle', 'right'
-. dy : x축 제목명을 표시하기 위한 간격 조정 용도
-. ticks : x축의 표시할 값의 갯수
-. tickPad : x축의 표시할 축과 값의 간격
-. isShow : x축 표시 여부
-. showGrid : x축 그리드 표시 여부
-. xPad: 각 x 값의 폭대비 여유 공간 비율.([0.1, 0.15, 0], 배열인 경우 첫번째는 모든 구간 사이의 간격,
2번째는 처음과 마지막의 간격 , 3번째는 그룹차트인 경우 그룹내 막대간의 간격.
(xDim Scale이 Ordinal 인 경우에만 적용)
-. xLabel : x축 레이블 표시 방법
(isVertical : 한글 세로표시(기본 false), rotate : -90 ~ 90 추천 (기본 : 없음))
*** yDim.(차트를 그릴 경우만 필요, 즉 isHtml=true 경우)
-. caption : y축 제목명
-. unitNm : 백만, 명 등의 서술적 단위명칭
-. scale : ordinal (V3: linear, log, sqrt)
-. color: '10','20','20b','20c' 및 사용자 정의 색상 설정 가능.
-. format : 정수(,d), 실수(,f 또는 ,.2f), 백분율(% .2%)
-. captionFonts : x축 제목 표시 폰트
-. fonts: x축의 tick 값 표시하기 위한 폰트
-. cluster: stackArea, stackArea100, stackStream, stackBar, stackBar100, groupBar
-. axisPos : y축의 tick 값 대비 tick 위치 'left', 'right'
-. dx, dy : y축 제목명을 표시하기 위한 간격 조정 용도
-. ticks : y축의 표시할 값의 갯수
-. isShow : y축 표시 여부
-. showGrid : y축 그리드 표시 여부
-. minGap, maxGap: 0.0 ~ 0.2 (즉, 0 ~ 20%), 최소, 최대값을 표현하고자 축을 좀 더 크게 만든다.
없으면, 최소/대 실제 값이 상하한 선으로 설정되므로 상하의 여유가 없게 표시됩니다.
-. opacity : y축 적용 불투명도, 0 <= n <= 1
-. interpolate : 선형,영역형의 차트에서 사용될 보간 인자.(monotone: 기본값, cardinal,basis,step)
-. captionV : y축 제목을 세로로 표시할 경우로서 주로 한글에 적당합니다.
*** Measures(분석 항목) : 이태릭체의 옵션은 특수한 경우에 적용 됩니다.
-. caption : 항목(measure) 제목명
-. colNm : 컬럼명
-. classNm : 노드 세부 항목을 HTML기반(isHtml=true)으로 작성시 적용될 클래스명이며,
특히 c2iKey는 예약 클래스명으로 노드의 키입니다.
-. isImage : 이미지 화일 컬럼명 여부
-. draw : 초기 로드시 표시 여부 (기본 : true)
*** main : 각 노드별 키와 제공 통계정보 유형, 표출 방식 설정
-. group : 노드 키 컬럼과, 폰트 및 불투명도 설정.
-. agg(차트를 그릴 경우) : 차트 중앙에 표시할 통계 유형.(현재는 ‘sum’ 기준만 제공)
-. info(차트를 그릴 경우) : 차트 중앙에 표시할 통계 형식 함수 정보.
-. body(isHtml true인 경우) : 노드의 색상 구분을 하기 위한 정보
*** node : 개별 노드 정보
-.isHtml : 차트인 경우 false, html인 경우 true
-.width, height : 노드의 크기 설정
-.borderRadius, borderWidth: 모서리 각 & 넓이 설정
-.bColor: 노드 배경 색상 설정
-.opacity: 노드 전체 불투명도
*** geometry
-.type: 도형 유형선택 (pattern, curve, table, sphere, helix, grid)
-.autoChange : 도형 유형 자동 변경여부
-.easing: 애니메이션시 적용될 기본 알고리즘(back,linear,elastic,exp,bounce..)
-.changeInterval: 도형 변경 시간간격 (ms)
-.curve : { cols: 15, separation: 150, y: 200 },
.cols: 노드의 컬럼 갯수.
.separation : 옆 노드와의 상하위 및 전후 간격 조정
.y 값은 중앙기준으로 +이면 위로 , -이면 아래로 이동해서 draw.
-.table: { cols: 10, widthGap: 10, heightGap: 15, y: 800 }, // pattern과 공용
.cols: 노드의 컬럼 갯수.
.widthGap, heightGap 노드의 넓이, 높이 간격.
.y 값은 중앙기준으로 +이면 위로 , -이면 아래로 이동해서 draw.
-.sphere: { radius: 850 },
.radius: 구형의 반지름.
-.helix: { radius: 1000, y: 400 },
.radius 나선형의 반지름.
-.grid: { width: 800, heightGap: 20, rows: 5, cols: 5, zGap: 250, y: 400 }
.width: 그리드 전체의 넓이.
.heightGap: 노드의 높이 간격.
.matrix: 노드의 행,열 갯수.
.zGap: 그리드 z 간격.
.x: 값은 matrix가 5가 아닌 경우의 간격 조정용.
.y: 값은 중앙기준으로 +이면 위로 , -이면 아래로 이동해서 draw.
*** rotate
-.direction: 회전 방향 ('stop','left','right')
-.speed: 회전 속도 (0.001 ~ 0.03)
*** controllers: 전체 노드 제어(3D 트랙볼) 정보
-.rotateSpeed: 좌측 마우스 이동시 회전 속도 설정. (0.5 ~ 3)
-.minDistance: 휠-마우스 확대시 최소 거리 (250)
-.maxDistance: 휠-마우스 축소시 최대 거리 (30000)
-.noRotate: 좌측 마우스 회전 금지
-.noZoom: 휠-마우스 확대 금지
-.noPan: 우측 마우스 이동 금지
*/
var options = {
// width, height 정수 값 설정시 해당 값으로 설정되며,
// 미 정의시, c2i4Size 클래스가 존재하면 해당 클래스의 넓이를 상속 받음.
// 이때 높이 값 없으면 (window.innerHeight - c2i4Size 클래스의 넓이)로 설정
isResponsive: true, theme: '#474747', // lang: 'jp', // width: 1200, height: 700,
margin : {top: 40, left: 25, right: 10, bottom: 20},
easing: 'linear', duration : 1200, delay : 100,
data : undefined, preBuildData: false,
positionData: textPosData,
title: {
caption:"지방자치단체별 중기지방재정 계획", fonts:['맑은 고딕','12px','#7FFFFF'],textDeco:"underline", gap: 5, xPos:'middle', yPos:'top',
subCaption:"('17년 1~5차년도 기준)", subFonts: ['맑은 고딕','12px','#e7e5e5','#CFDD3F'], opacity:1,
desc:"데모용으로 작성된 차트"
},
//// for Chart(즉, isHtml false인 인 경우), start ////
xDim:{caption:'계획차수년도', unitNm:'', colNm:'year', scale:'ordinal', format:'',
captionFonts:['맑은 고딕','12px','#ddd'], fonts:['맑은 고딕','8px','white'],
xPos:'middle', dy:45, ticks:0, tickPad: 5, isShow:true, showGrid:true,
xPad:[0.1, 0.15, 0], xLabel:{rotate:45, isVertical: false, dy: 15}
},
yDim:{caption:'예산계획', unitNm:'(십억)', scale:'linear', color:'20', format:',f', formatAvg:',f',
captionFonts:['맑은 고딕','10px','#ddd'], fonts:['맑은 고딕','8px','#eee'],
cluster:'stackbar', stackValue: 'both',
axisPos:'left', dx:8, dy:3, ticks:5, isShow:true, showGrid:true, minGap: .15, maxGap: .1,
opacity:0.9, interpolate: 'monotone', captionV:true
},
//// for Chart, end ////
measures:[
{caption:'일반공공행정', colNm:'col1', draw:true},
{caption:'교육', colNm:'col2', draw:true},
{caption:'문화관광', colNm:'col3', draw:true},
{caption:'환경', colNm:'col4', draw:true},
{caption:'사회복지', colNm:'col5', draw:true},
{caption:'보건', colNm:'col6', draw:true},
{caption:'국방', colNm:'col7', draw:true},
{caption:'기타', colNm:'col8', draw:true}
],
node: { isHtml: false, width: 240, height: 160, borderRadius: 10, borderWidth: 2, bColor:'#005a5a', opacity:0.75},
main: {
group: { colNm: 'name', fonts:['맑은 고딕','12px','#7FFFFF'], opacity: 0.8 },
//// for Chart(즉, isHtml false인 인 경우), start ////
agg: { type: 'sum', format:',f', color:'20', fonts:['맑은 고딕','30px','#faff35'], opacity: 0.9 },
info: { fn: getInfoFn, fonts:['맑은 고딕','8px','#fffdfd'], opacity: 0.8 }
//// for Chart, end ////
},
////////// 3D //////////
geometry: {
menuId: '#menu', // 없어도 무방하나, 자동 actived 클래스가 설정되지 않습니다.
type: 'pattern', autoChange : true, easing: 'back', changeInterval: 5000,
curve: { cols: 20, separation: 150, y: 250 },
pattern: { cols: 10, widthGap: 10, heightGap: 10, y: 1000 },
table: { cols: 10, widthGap: 10, heightGap: 15, y: 800 },
sphere: { radius: 850 },
helix: { radius: 1000, rows: 8, y: 400 },
grid: { width: 800, heightGap: 20, matrix: 5, zGap: 250, x: 0, y: 400 }
},
rotate: {
direction: 'stop', speed: 0.005
},
controllers: { // 0.5 ~ 3
rotateSpeed: 1.5, minDistance: 250, maxDistance: 30000,
noRotate: false, noZoom: false, noPan: false
},
////////// 3D //////////
// 외부 범례만 사용할 경우 아래 범례는 주석처리한 후, 상위의 margin.top 25 정도로 설정
legend: { columns: 4, colWidth: 55, size: 6, radius: 3, margin: {top: -17, left: 0}, draw: true},
optionWindow:{ initPos:'optionPosition', opacity: 0.8 },
tooltip: {id: '#tooltip', infoLevel:0, fixedPos: /*undefined*/ {xPos:'end', yPos:'top'}, displayTips: 3, opacity: 0.9, isUserTip: false, isShow: true },
method:{ click:getClickInfo, mouseenter:getMouseEnterInfo, mouseleave:getMouseLeaveInfo, mousemove: getTooltipInfo },
isDev: false
};
var c2iChart = c2i.infoG.std3D('#c2iStd3D', options); //.render(); // for demo
var srcData = './assets/data/infoG/std3D_investment.csv', root;
d3.csv(srcData, function(error, data) {
root = data;
c2iChart.data(data).render();
createLegendFirst();
createLegendOrdinalFirst();
});
///// 개발자 임의 코드 Start
function getInfoFn(d) {
return d.children.length + '년간 예산계획(' + (d.sum / d.children.length).toFixed(1) + '/년)'
}
d3.select('#c2iGuide').on('click', c2iGuide);
d3.select('#c2iGuideClose').on('click', c2iGuideClose);
d3.select('#dataDecrease').on('click', dataDecrease);
d3.select('#dataChange').on('click', dataChange);
d3.select('#rotateDirection').on('click', function(d) {
var text = d3.select(this).text();
if (text === '좌우 회전') text = '좌 회전중';
else if (text === '좌 회전중') text = '우 회전중';
else text = '좌우 회전';
d3.select(this).text(text);
c2iChart.rotateDirection(d);
});
d3.select('#autoChange').on('click', function() {
options.geometry.autoChange = !options.geometry.autoChange;
c2iChart.autoChange();
});
menu();
function menu() {
d3.select('#menu')
.selectAll('button')
.data(c2i.util.shapeTypes('kr'), function(d) { return d.type; }) // {name: '문자', 'textShape'}
.enter()
.append('button')
.attr('class', function(d) {
return 'btn btn-info btn-sm c2i_' + d.type + (d.type === options.geometry.type ? ' actived' : '');})
.on('click', function(d) {
d3.selectAll('#menu button').classed('actived', false);
d3.select(this).classed('actived', true);
options.geometry.type = d.type;
if (d.type === 'pattern') {
patternDraw.hideShow(false);
}
c2iChart.shapeChange()
})
.html(function(d) {
return d.name; // 한글 표현시 : d.name, 영문 표현시 : c2i.util.pascalize(d.type)
});
}
function c2iGuide() {
d3.select('#c2iGuideInfo').classed('c2iHidden', !d3.select('#c2iGuideInfo').classed('c2iHidden'));
}
function c2iGuideClose() {
d3.select('#c2iGuideInfo').classed('c2iHidden', true);
}
function dataDecrease() {
var data = [], len = root.length;
root.forEach(function(d, i) {
if (i > len * 0.05)
data.push(d);
});
root = data;
c2iChart.data(root).render(true);
redrawLegend();
}
function dataChange() {
root.map(function(rec) {
for(var d in rec) {
if (!(d === options.xDim.colNm || d === options.main.group.colNm)) {
if (rec[d] !== 0) {
rec[d] = +(rec[d] * Math.random() + 5).toFixed(0);
if (rec[d] > 50)
rec[d] = 50;
}
}
}
});
c2iChart.data(root).render();
redrawLegend();
// 아래 코딩도 동일함.
// c2iChart.data(root);
// c2iChart.render();
}
function redrawLegend(){
if (c2iLg){
legendOptions.data = c2iChart.data().map(function(d) {
return {first: d.sum};
});
c2iLg = c2i.ui.legendQuantile('#c2iLegend', legendOptions).render();
c2iChart.setColors(legendOptions.measureColNm, c2iLg.colorPicker());
}
}
// 개발자 임의 코드 End
/*
대.소문자는 반드시 준수해야 합니다.
옵션이 없거나(미정의) '' 이면, 필수요소는 기본값 자동 적용되며 불필요한 옵션은 자동으로 적용되지 않습니다.
*** 공통 정보
-.width, height : 범례 전체 영역.
-.layout : ['topbottom', 1] 또는 ['leftright', 1] (기본값)
두번째 인자: 각 행 또는 열의 범례 갯수.
-.padding : 범례 아이템간 간격.(기본값 5)
-.rectSize : 범례 사각형 정보. {width: 12, height: 12, radius: 2, dy: 0}
(색상 정보는 관련 차트의 객체정보를 계승함)
-.labelGap : 'topbottom'인 경우, 상위 범례 아이템간의 간격(단위 em).
'leftright'인 경우, 좌측 범례 아이템 기준
-.labelDistance : 범례 사각형과 레이블 명칭과의 간격.(기본값: 10px)
-.valueDistance : 범례 값을 표시할 경우 레이블 명칭과의 간격.(단위 px)
-.measure: 대상 차트의 항목 컬럼명.(v2.8.0)
-.values , colors: measure 의 해당 값과 대상 색상.(v2.8.0)
-.targetChartObject : 대상 차트 객체 변수명.
*/
/* ======================================================================== */
var legendOptions = {
width: 300, height: 60, duration: 750, delay: 150, type: 'Horizontal', // lang: 'kr',
caption:'투자금액',
rectInfo: { width: 0.90, height: 12, top:10, showTick: true, tickGap: 5,
opacity: 0.8, opacityHover: 0.6, strokeHover: 'white', indicatorColor:'#ff1103',
colors: ['#8DDDA4','#CAE955','#FFD660','#FEB372','#FE5055']},
measureColNm: 'first', format:',f', fonts:['맑은 고딕','11px','#eeeeee'],
unitNm: '(십억)', unit: 1, unitGap : 4 /* em */,
showFocusLabel: true, // v2.8.0
method:{ click:getClickInfo, mouseenter:getMouseEnterInfo, mouseleave:getMouseLeaveInfo },
targetChartObject: c2iChart
};
var c2iLg;
function createLegendFirst(){
if (!c2iLg){
c2iLg = c2i.ui.legendQuantile('#c2iLegend', legendOptions).render();
c2iChart.setColors(legendOptions.measureColNm, c2iLg.colorPicker());
}
}
/*
대.소문자는 반드시 준수해야 합니다.
옵션이 없거나(미정의) '' 이면, 필수요소는 기본값 자동 적용되며 불필요한 옵션은 자동으로 적용되지 않습니다.
*** 공통 정보
-.width, height : 범례 전체 영역.
-.layout : ['topbottom', 1] 또는 ['leftright', 1] (기본값)
두번째 인자: 각 행 또는 열의 범례 갯수.
-.padding : 범례 아이템간 간격.(기본값 5)
-.rectSize : 범례 사각형 정보. {width: 12, height: 12, radius: 2, dy: 0}
(색상 정보는 관련 차트의 객체정보를 계승함)
-.labelGap : 'topbottom'인 경우, 상위 범례 아이템간의 간격(단위 em).
'leftright'인 경우, 좌측 범례 아이템 기준
-.labelDistance : 범례 사각형과 레이블 명칭과의 간격.(기본값: 10px)
-.valueDistance : 범례 값을 표시할 경우 레이블 명칭과의 간격.(단위 px)
-.measure: 대상 차트의 항목 컬럼명.(v2.8.0)
-.values , colors: measure 의 해당 값과 대상 색상.(v2.8.0)
-.targetChartObject : 대상 차트 객체 변수명.
*/
/* ======================================================================== */
var legendOptionsOrdinal = {
width: 410, height: 70, layout: ['topbottom', 4], padding: 8, theme:'none',
duration: 750, delay: 50,
rectSize: { width: 18, height: 18, radius: 9},
labelGap : 1.3/* em */, labelDistance: 6, valueDistance: 0,/* 120px */
fonts:['맑은 고딕','14px','#eeeeee'], isReadOnly: true,
targetChartObject: c2iChart
};
var c2iLgOrdinal;
function createLegendOrdinalFirst(){
if (!c2iLgOrdinal){
c2iLgOrdinal = c2i.ui.legendOrdinal('#c2iLegendOrdinal', legendOptionsOrdinal).render();
}
}
////////////////
function getClickInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' click ');
for(var attr in data){
console.log(attr + ' : ' + data[attr]);
}
}
function getMouseEnterInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' getMouseEnterInfo');
c2iChart.selectNodes(fromSource, data);// 범례 선택노드에 해당하는 3dStdInfo 정보 표현 API
if (fromSource.selector === '3dStdInfo'){
// 3dStdInfo 특정 노드에 해당하는 범례 Indicator 표시
if (c2iLg) c2iLg.indicatorView(data); // data = {value: 203030}
}
}
function getMouseLeaveInfo(fromSource, data){
c2iChart.selectNodes(); // 3dStdInfo 초기화 API
console.log(fromSource.container + ',' + fromSource.selector + ' getMouseLeaveInfo');
}
function getTooltipInfo(fromSource, data){
console.log(fromSource.container + ',' + fromSource.selector + ' getTooltipInfo');
document.getElementById('name').innerHTML = '주어진 데이터를 기반으로';
document.getElementById('measure').innerHTML = '코딩 확장 구현 하세요..!';
}
///////// 문자 패턴 컴포넌트 /////////
var patternOptions = {
// 실제 데이터 수 보다 가능하면 크게((row * col) 설정하면 좋음.
grid: { row: 15, col: 10 },
rect: { width: 12, height: 12, bColor:'#005a5a', opacity: 0.75},
data: undefined,
method:{
onApply: function(data) {
console.log('3D Info-Graphic 차트에 반영....!!');
console.log(data);
c2iChart.patternChange(data);
}}
};
var patternDraw = c2i.ui.patternDraw('#positionGrid', patternOptions).data(textPosData).render();
//////// 개발자 임의 코드
d3.select('#toggleBtn').on('click', function() {
patternDraw.hideShow();
});
</script>
<script>
d3.select('#save').on('click', exportImage).on('touchstart', exportImage);
function exportImage(){
c2iChart.exportData(); // 'text'(default),'xls' / ''(default),'all'
}
</script>
</body>
</html>