CSS를 알아두면 D3.js를 사용할 때 편합니다. CSS은 HTML의 각 태그들의 스타일을 지정해 줍니다. 태그의 스타일을 D3.js 함수로 지정하여 멋지게 태그의 스타일을 만들기 때문에 미리 CSS의 개념을 잡아 놓으시면 나중에 D3.js에서 사용하실 때 효율적으로 코딩을 할 수 있습니다.
[기본 배치] : 3가지 형태로 CSS를 표현 합니다.
<style>
svg {
background-color: yellow;
}
</style>
<svg width="300" height="300" style="background: yellow"></svg>
<link rel="stylesheet" href="style.css" />
style.css 파일
svg {
background-color: yellow;
}
스타일 지정 방식에서 특정 태그의 스타일을 지정하는 방식으로는 태그명, 클래스명, ID명으로 해당 태그의 스타일을 지정 할 수 있다.
<style>
svg{
background-color: yellow;
}
.a{
fill:red;
stroke:blue;
stroke-width:5;
}
#b{
fill:blue;
stroke:red;
stroke-width:5;
}
</style>
<svg width="300" height="300">
<rect class="a" x="10" y="10" width="50" height="30" />
<rect id="b" x="100" y="100" width="50" height="30" />
</svg>
위 예제는 3가지 접근 방법인데 svg 태그명으로 접근하면 html 문서상에 모든 svg 태그의 스타일을 지정하게 되고, 클래스명으로 접근하면 해당 클래명을 가진 태그만 스타일을 지정하게 된다. id명도 마찬가지입니다.
[결과]
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", "300")
.attr("height", "300")
.style("background-color","yellow");
</script>
지난 시간의 예제 소스 입니다. 보시면 style()함수가 있고 각 개별적으로 스타일 속성을 지정해 주시면 svg 태그의 스타일이 변경됩니다.
묶어서 한번에 스타일을 지정 하고 싶을 때에는 rect 태그를 기준으로 코딩하면 다음과 같습니다.
.styles({fill: 'red', stroke: 'blue', 'stroke-width': 5, opacity: 0.5 })
즉, 한개씩 수정할 때는 style()함수를 사용하고 여러개를 한번에 수정할 때에는 styles()함수를 사용한다.
참고로, attrs()나 styles()함수를 사용하기 위해서는 다음과 같은 링크 태그를 삽입해 놓아야 합니다.
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
CSS은 간단한 기본 지정만 하고 끝냈는데 사실 다양한 기능들이 있습니다. CSS를 얼마나 많은 사전지식을 가지고 있느냐에 따라 데이터 시각화의 스케일이 달라지게 됩니다. 애니메이션 효과도 부여 할 수 있고 스타일을 좀 더 정교하게 지정을 할 수 있는데 이건 CSS 래퍼런스를 좀 깊게 공부해 보세요. 나중에 D3.js로 데이터 시각화 할 때 CSS의 사전 지식을 어느정도 가지고 있으면 고퀄리티 작품을 만들 수 있을 거라 생각됩니다.
오늘 post에서는 간단히 CSS라는 것이 대충 어떤 느낌인지만 알아보는 시간이기 때문에 CSS 기교는 모두 뺐습니다. 이부분은 여러분들이 한번 CSS에 대한 문법을 공부한 뒤에 D3.js에서 CSS를 다뤄 보세요.