[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>