[D3.js] HTML의 SVG 태그 D3로 코딩

[D3.js] HTML의 SVG 태그 D3로 코딩

---

지난 시간에는 HTML SVG 그리기 태그들을 이용하여 기본 태그와 속성들을 살펴 보았습니다. 이제는 D3.js 함수들을 사용하여 지난 시간의 배운 태그들을 표현을 해보는 시간을 갖도록 하겠습니다.

1. SVG 태그

---

<svg width="300" height="300"></svg>

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","blue");
</script>

attr()함수로 태그의 속성값을 지정하고 style()함수로 태그의 스타일을 지정해 줍니다.

여기서 몇개 안되는 속성 지정은 그냥 attr()함수나 style()함수로 일일히 지정해 주면 되지만 속성과 스타일의 지정 갯수가 많을 경우는 반복 코딩으로 꽤 귀찮은 코딩이 되겠죠.

이부분에 대해서 살펴보니깐 다음과 같이 수정하면 되더군요.

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
     .attrs({ width: 300, height: 300 })
     .style("background-color","yellow");
</script>

attrs()함수로 해서 여러개의 속성을 한번에 지정 할 수 있습니다.

2. 사각형 태그

---

기본 이미지 모양 태그 rect, circle, line, path, ellipse, polyline 등을 사용하여 그림을 그리게 되는데 그중 rect(사각형)을 D3.js로 어떻게 코딩되는지 살펴보도록 하죠.

위 SVG 코딩의 연장 선상에서 보시기 바랍니다.

var rect = svg.append("rect")  
   .attr("x","10")
   .attr("y","10")
   .attr("width","100")<center>![](https://i.imgur.com/gQiSnv4.jpg)</center>
   .attr("height","100")
   .attr("fill", "blue") //내부색
   .attr("stroke","red") //테두리색
   .attr("stroke-width","5") //테두리 두께
   .attr("opacity","0.5");  //불투명도

=> 내부색이 blue이고 테두리가 red인데 이미지가 이상하게 보일꺼에요. 불투명도 때문에 그렇습니다.

그런데 위와 같이 코딩을 하면 꽤 길고 귀찮게 attr()함수를 반복 코딩을 하는 번거로움이 발생합니다.

이부분을 간단히 코딩해 볼까요.

 var rect = svg.append("rect")
   .attrs({ x: 10, y: 10, width: 100, height: 100, fill: 'red', stroke: 'blue', 'stroke-width':5, opacity: '0.5' }) 

HTML에서 코딩하는 것처럼 속성 값들을 위와같이 나열하면 됩니다

다른방법으로,

 var rect = svg.append("rect")
   .attrs({ x: 10, y: 10, width: 100, height: 100})
   .styles({fill: 'red', stroke: 'blue', 'stroke-width': 5, opacity: 0.5 })

attrs()함수로 전체 속성을 지정해 주고 스타일 경우도 styles()함수로 전체 스타일을 지정해 주면 됩니다.

주의 : stroke-width의 경우는 따옴표로 묶어주셔야 합니다. '-'기호는 인식에서 에러가 발생하더군요. 그냥 HTML에서 쓰던 방식으로 코딩하면 안되고 일부 안되는 부분은 시행착오를 거쳐서 알아내야 하더군요.

그리고, attr() 함수의 인자인지 아니면 style()함수의 인자인지 참 애모한 경우가 있습니다. 일부 인자의 경우는 둘 모두에서 사용 될 수 있고 경우에 따라 한쪽에서만 사용되는 경우가 있는데 이건 연습이 필요해 보이네요.

3. 그외 태그들

---

원

---

<circle cx="100" cy="100" r="50" fill="red" stroke="blue" stroke-width="5"></circle>

타원

---

 <ellipse cx="100" cy="100" rx="50" ry="70" fill="red" stroke="blue" stroke-width="5"></ellipse>

라인

---

 <line x1="10" y1="10" x2="290" y2="290" stroke = "blue" stroke-width="5"> </line>

특수라인(path)

---

 <path d="M10,210 L110,120 110,210 110,220 210,250" fill="none" stroke="blue" stroke-width="5"></path>

폴리건

---

<polyline points="50,50 250,50 150,150 50,50" fill= "red" stroke="blue" stroke-width="5"></polyline>

---

위의 각 태그들은 사각형에서 표현했던 방식으로 여러분들이 수정해 보세요.

마무리

---

d3.js로 접근하는 함수에 대해 간단히 사각형으로 예를 들었고 그외 태그들은 복습 차원으로 다시 나열했습니다. 시험문제라고 생각하고 위 태그들을 사각형에서 코딩했던 방식으로 나머지 태그들을 어떻게 코딩을 해야 할지 한번 풀어 보세요.