This repository has been archived by the owner on Aug 5, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
customs.js
99 lines (87 loc) · 3.16 KB
/
customs.js
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
const mansOfCustom=[
{ target:"10", gender:"남성", mount:1000 },
{ target:"20", gender:"남성", mount:2000 },
{ target:"30", gender:"남성", mount:2200 },
{ target:"40", gender:"남성", mount:5000 },
{ target:"50", gender:"남성", mount:5500 },
{ target:"60+", gender:"남성", mount:1200 }
];
const womanOfCustom=[
{ target:"10", gender:"여성", mount:300 },
{ target:"20", gender:"여성", mount:4300 },
{ target:"30", gender:"여성", mount:6000 },
{ target:"40", gender:"여성", mount:3000 },
{ target:"50", gender:"여성", mount:2000 },
{ target:"60+", gender:"여성", mount:800 },
];
let allOfCustom=[];
for (let index = 0; index<mansOfCustom.length; index++) {
const { target, mount:manMount }=mansOfCustom[index];
const { mount:womanMount }=womanOfCustom[index];
allOfCustom.push({
target,
gender:"전체",
mount:manMount+womanMount
});
}
const rectSize=20;
const rectX=rectSize+5;
const backColor="white";
const rectColor="#6c5ce7";
const maxOfGrpah=findMaxMount(allOfCustom);
const svgTag=d3.select("#svg__container");
draw(allOfCustom,{
title:"전체 성별 그래프"
});
draw(mansOfCustom,{
title:"남자 성별 그래프"
},200);
draw(womanOfCustom,{
title:"여자 성별 그래프"
},400);
function draw(array, meta, xExpan=0, yExpan=0) {
const rectG=svgTag.append("g").attr("transform",`translate(${80+xExpan},${30+yExpan})`);
const rectLabelG=svgTag.append("g").attr("transform",`translate(${80+xExpan},${maxOfGrpah/20+yExpan + 45})`);
const rectMeta=svgTag.append("g").attr("transform",`translate(${80+xExpan + 5},${maxOfGrpah/20+yExpan + 70})`);
rectMeta.append("text").attr("font-size",20).text(meta.title);
const rectLineG=svgTag.append("g").attr("transform",`translate(${80+xExpan},${maxOfGrpah/20 + 30})`);
const arrayMax=findMaxMount(array);
// 8000, 6000, 4000 이면 2000 간격으로 총 4개 3개 2개를 그어야 한다.
// 선의 가로길이는 0부터 rectX * array.length
console.log(arrayMax);
for (let index=0; index<arrayMax/2000; index++) {
const yModify=(-2000*index)/20;
rectLineG.append("line")
.attr("y1",yModify)
.attr("y2",yModify)
.attr("x1",-5)
.attr("x2",rectX*array.length)
.attr("stroke","grey");
rectLineG.append("text")
.attr("y",yModify+7)
.attr("x",-40)
.text(2000*index);
}
array.forEach(({target, gender, mount},key)=>{
rectG.append("rect")
.attr("x",rectX*key).attr("y",0)
.attr("width",rectSize).attr("height",maxOfGrpah/20)
.attr("fill",rectColor);
rectG.append("rect")
.attr("x",rectX*key).attr("y",0)
.attr("width",rectSize).attr("height",(maxOfGrpah - mount)/20)
.attr("fill",backColor);
rectLabelG.append("text")
.attr("x",rectX*key).attr("y",0)
.text(target);
});
}
function findMaxMount(array) {
let maxMount=0;
array.forEach(({mount})=>{
if (maxMount<=mount){
maxMount=mount;
}
});
return maxMount;
}