[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></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로 접근하는 함수에 대해 간단히 사각형으로 예를 들었고 그외 태그들은 복습 차원으로 다시 나열했습니다. 시험문제라고 생각하고 위 태그들을 사각형에서 코딩했던 방식으로 나머지 태그들을 어떻게 코딩을 해야 할지 한번 풀어 보세요.
저에게는 너무 어려운 포스팅이지만~
나중에 코딩할 일이 있으면 참고하도록 하겠습니다~
네! 감사합니다.
아직 Payout 되지 않은 관련 글
모든 기간 관련 글
인터레스팀(@interesteem)은 AI기반 관심있는 연관글을 자동으로 추천해 주는 서비스입니다.
#interesteem 태그를 달고 글을 써주세요!
You received 2.64 % upvote as a reward From round 3 on 2018.09.14. Congrats!
Thank you.
앞으로의 세상은 소프트웨어를 하는 사람과 못하는 사람으로 나뉜답니다. 부러워요... 전 assembler와 C밖에 몰라서...
어셈블리어는 다 까먹어서 기억도 안나네요.
어셈블리어 코딩은 대학 2학년데 전자회로 수업 때 8051보드에서 LED 깜박일 때 사용해보고 딱히 써보질 못해서 잊혀진 언어이네요.
요새도 가르키고는 있나보네요. 요즘은 전부 C로 사용하니 잘 쓸일이 없습니다.
이오스 계정이 없다면 마나마인에서 만든 계정생성툴을 사용해보는건 어떨까요?
https://steemit.com/kr/@virus707/2uepul
짱짱맨 방문에 감사합니다.