지난 시간에는 HTML SVG 그리기 태그들을 이용하여 기본 태그와 속성들을 살펴 보았습니다. 이제는 D3.js 함수들을 사용하여 지난 시간의 배운 태그들을 표현을 해보는 시간을 갖도록 하겠습니다.
<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()함수로 해서 여러개의 속성을 한번에 지정 할 수 있습니다.
기본 이미지 모양 태그 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>
.attr("height","100")
.attr("fill", "blue") //내부색
.attr("stroke","red") //테두리색
.attr("stroke-width","5") //테두리 두께
.attr("opacity","0.5"); //불투명도
그런데 위와 같이 코딩을 하면 꽤 길고 귀찮게 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()함수의 인자인지 참 애모한 경우가 있습니다. 일부 인자의 경우는 둘 모두에서 사용 될 수 있고 경우에 따라 한쪽에서만 사용되는 경우가 있는데 이건 연습이 필요해 보이네요.
<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 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로 접근하는 함수에 대해 간단히 사각형으로 예를 들었고 그외 태그들은 복습 차원으로 다시 나열했습니다. 시험문제라고 생각하고 위 태그들을 사각형에서 코딩했던 방식으로 나머지 태그들을 어떻게 코딩을 해야 할지 한번 풀어 보세요.