[D3.js] 이미지 추가
- D3.js 공식홈페이지 : https://d3js.org/
오늘은 간단히 이미지를 추가하는 방법을 살펴보도록 하죠.
1. HTML 이미지 태그
HTML에서 svg에 이미지 삽입하면 아래와 같이 코딩 됩니다.
<svg width="300" height="300">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://i.imgur.com/tWr3JBD.jpg" x="0" y="0" width="300" height="300"></image>
</svg>
image 태그 속성을 보면 이미지 주소, x,y로 이미지가 출력되는 시작 위치, 이미지 폭과 높이로 기본 속성을 잡았습니다.
[결과]
2. D3.js로 이미지 추가
방금 했던 HTML 이미지 추가 코딩을 D3.js에서 표현을 하면 다음과 같습니다.
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select('body').append('svg')
.attr("width",300)
.attr("height",300);
svg.append("image")
.attr("xlink:href","https://i.imgur.com/tWr3JBD.jpg")
.attr("x",0)
.attr("y",0)
.attr("width",300)
.attr("height",300);
</script>
</body>
보시면 HTML 코딩보다는 좀 길죠. 일일히 attr()함수로 코딩했습니다. 그룹으로 묶어서 코딩 할 수 있지만 일부러 위처럼 코딩을 했고 태그의 각 속성을 이해하시기 쉽게 코딩했네요.
[결과]
결과는 동일합니다.
굳이 이렇게 이미지를 추가 한 이유가 뭘까요. 이미지도 여러개의 데이터로 읽어 올 일이 있습니다. 그럴 때에 d3.js로 출력틀 코딩을 만들어넣고 이미지데이터만 연결하면 쉽게 표현 할 수 있기 때문에 이렇게 d3.js로 표현합니다.
마무리
주말 단풍놀이를 갔다 온 피로로 post 쓰기 너무 귀찮아서 짧게 대충 실험 했네요.
Sponsored ( Powered by dclick )
업무효율을 높여주는 도구(tool) Best 3
일을 하다보면 여러가지 툴을 쓴다. 우리 주변에는 조금이라도 편하고, 안전하게 업무 관리를 도...
이 글은 스팀 기반 광고 플랫폼
dclick 에 의해 작성 되었습니다.