[D3.js] d3-3D 라이브러리 소개

---

• Nieke’s github : https://github.com/Niekes/d3-3d
• Stefan Nieke’s Blocks 예제 : https://bl.ocks.org/Niekes

---

d3로 3D 차트를 표현하는 방법이 뭐가 없는가 찾다가 d3-3D.js 라이브러리 하나를 발견 했네요. 다양한 기능은 없지만 3D 공부하기용으로 괜찮아 보여서 소개합니다. "Stefan Nieke’s Blocks"의 가면 실험 예제들이 있어서 소스를 분석하셔서 응용하면 좋을 듯 싶네요. 아무튼 3D 차트 입문용으로 공부하시기에 좋을 것 같아서 post로 작성해봤네요.

1. Nieke’s github

---

이곳에 가시면 다운로드를 받으시던가 아니면 아래 링크를 이용하여 다이렉트로 실험 할 수 있습니다.

• 링크 :

<script src="https://unpkg.com/d3-3d/build/d3-3d.js"></script>
<script src="https://unpkg.com/d3-3d@version/build/d3-3d.js"></script>
<script src="https://unpkg.com/d3-3d@version/build/d3-3d.min.js"></script>

그 다음 함수 래퍼런스가 간단히 소개 되어 있네요.

그런데 여기 샘풀 예제를 실행 시키면 잘 돌아가지 않네요. 아직 정확히 분석해 보지 못했지만요.

2. Stefan Nieke’s Blocks 예제

---

그래서 위 "Stefan Nieke’s Blocks"예제로 가셔서 몇개의 예제들이 있는데 따라서 코딩해보고 어떻게 코딩이 이루어지는지 소스를 분석하면 될 듯 싶네요.

보시면 몇개 예제가 없지만 간단한 샘풀 예제라 공부하시기 좋을 듯 싶네요.

3. 샘풀 예제 소스만 돌려 봄

---

"3D Surface Plot in D3.js with d3-3d" 예제를 한번 돌려봤네요. 제가 코딩한 것이 아니고 "Stefan Nieke’s Blocks" 의 예제임으로 돌아가는 장면만 소스를 메모장에서 코딩한 뒤 실행시켜서 촬영했네요. 제가 코딩한 것이 아니기 때문에 소스는 직접 가셔서 보셔야 합니다.

마무리

---

이 d3-3D.js 라이브러리를 좀 사용하기가 어려운 것 같은 느낌이 드네요. 자세히 보지 않고 구글 검색을 통해서 자료를 찾은 거라서 래퍼런스를 보고 코딩하는데 잘 안되고 에러가 발생하고 해서 아직은 사용을 잘 못하네요. github에 공개된 샘풀 예제로 간단히 흉내만 정도 뿐이 안되어서 3D 차트는 좀 더 실력을 쌓은 뒤 실험을 해야 겠다는 생각이 드네요.

오늘 post는 나중에 제가 공부하기 위해서 저장용 post네요.

---

_{Sponsored ( Powered by dclick )}