[D3.js] HTML의 CSS

[D3.js] HTML의 CSS

---

CSS를 알아두면 D3.js를 사용할 때 편합니다. CSS은 HTML의 각 태그들의 스타일을 지정해 줍니다. 태그의 스타일을 D3.js 함수로 지정하여 멋지게 태그의 스타일을 만들기 때문에 미리 CSS의 개념을 잡아 놓으시면 나중에 D3.js에서 사용하실 때 효율적으로 코딩을 할 수 있습니다.

1. CSS(Cascading Style Sheets)

---

[기본 배치] : 3가지 형태로 CSS를 표현 합니다.

• HTML 문서에 삽입하는 경우 :

<style>
svg {
  background-color: yellow;  
}
</style>

• HTML 태그 속에 삽입하는 경우(svg) :

<svg width="300" height="300" style="background: yellow"></svg> 

• 외부 CSS파일로 빼놓을 경우 :

<link rel="stylesheet" href="style.css" />

style.css 파일

svg {
  background-color: yellow;  
}

3. CSS 기본 코딩

---

스타일 지정 방식에서 특정 태그의 스타일을 지정하는 방식으로는 태그명, 클래스명, 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명도 마찬가지입니다.

[결과]

2. D3.js로 스타일 지정

---

<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를 다뤄 보세요.