D3.js - การติดตั้ง

ในบทนี้เราจะเรียนรู้วิธีตั้งค่าสภาพแวดล้อมการพัฒนา D3.js ก่อนที่เราจะเริ่มเราต้องมีส่วนประกอบต่อไปนี้ -

ไลบรารี D3.js
Editor
เว็บเบราว์เซอร์
เว็บเซิร์ฟเวอร์

ให้เราทำตามขั้นตอนทีละขั้นตอนโดยละเอียด

ห้องสมุด D3.js

เราจำเป็นต้องรวมไลบรารี D3.js ไว้ในหน้าเว็บ HTML ของคุณเพื่อใช้ D3.js ในการสร้างภาพข้อมูล เราสามารถทำได้สองวิธีดังต่อไปนี้ -

รวมไลบรารี D3.js จากโฟลเดอร์โครงการของคุณ
รวมไลบรารี D3.js จาก CDN (Content Delivery Network)

ดาวน์โหลด D3.js Library

D3.js เป็นไลบรารีโอเพ่นซอร์สและซอร์สโค้ดของไลบรารีนั้นสามารถใช้ได้อย่างอิสระบนเว็บที่ https://d3js.org/เว็บไซต์. ไปที่เว็บไซต์ D3.js และดาวน์โหลด D3.js (d3.zip) เวอร์ชันล่าสุด ณ ตอนนี้เวอร์ชันล่าสุดคือ 4.6.0

หลังจากดาวน์โหลดเสร็จแล้วให้คลายซิปไฟล์แล้วมองหา d3.min.js. นี่คือเวอร์ชันย่อของซอร์สโค้ด D3.js คัดลอกไฟล์ d3.min.js และวางลงในโฟลเดอร์รูทของโปรเจ็กต์หรือโฟลเดอร์อื่น ๆ ที่คุณต้องการเก็บไฟล์ไลบรารีทั้งหมด รวมไฟล์ d3.min.js ในหน้า HTML ของคุณดังที่แสดงด้านล่าง

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js เป็นโค้ด JavaScript ดังนั้นเราควรเขียนโค้ด D3 ทั้งหมดของเราภายในแท็ก“ script” เราอาจต้องปรับแต่งองค์ประกอบ DOM ที่มีอยู่ดังนั้นจึงขอแนะนำให้เขียนโค้ด D3 ก่อนท้ายแท็ก "body"

รวม D3 Library จาก CDN

เราสามารถใช้ไลบรารี D3.js โดยเชื่อมโยงโดยตรงไปยังหน้า HTML ของเราจาก Content Delivery Network (CDN) CDN เป็นเครือข่ายของเซิร์ฟเวอร์ที่โฮสต์ไฟล์และส่งมอบให้กับผู้ใช้ตามตำแหน่งทางภูมิศาสตร์ หากเราใช้ CDN เราไม่จำเป็นต้องดาวน์โหลดซอร์สโค้ด

รวมไลบรารี D3.js โดยใช้ CDN URL https://d3js.org/d3.v4.min.js ลงในหน้าของเราตามที่แสดงด้านล่าง

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

ตัวแก้ไข D3.js

เราจำเป็นต้องมีตัวแก้ไขเพื่อเริ่มเขียนโค้ดของคุณ มี IDE ที่ยอดเยี่ยม (Integrated Development Environment) ที่รองรับ JavaScript เช่น -

รหัส Visual Studio
WebStorm
Eclipse
ข้อความประเสริฐ

IDE เหล่านี้ให้การเติมโค้ดอย่างชาญฉลาดรวมทั้งรองรับกรอบ JavaScript สมัยใหม่บางส่วน หากคุณไม่มี IDE แฟนซีคุณสามารถใช้โปรแกรมแก้ไขพื้นฐานเช่น Notepad, VI และอื่น ๆ ได้ตลอดเวลา

เว็บเบราว์เซอร์

D3.js ทำงานบนเบราว์เซอร์ทั้งหมดยกเว้น IE8 และต่ำกว่า

เว็บเซิร์ฟเวอร์

เบราว์เซอร์ส่วนใหญ่ให้บริการไฟล์ HTML ในเครื่องโดยตรงจากระบบไฟล์ภายในเครื่อง อย่างไรก็ตามมีข้อ จำกัด บางประการในการโหลดไฟล์ข้อมูลภายนอก ในบทหลังของบทช่วยสอนนี้เราจะโหลดข้อมูลจากไฟล์ภายนอกเช่นCSV และ JSON. ดังนั้นมันจะง่ายกว่าสำหรับเราถ้าเราตั้งค่าเว็บเซิร์ฟเวอร์ให้ถูกต้องตั้งแต่แรก

คุณสามารถใช้เว็บเซิร์ฟเวอร์ใดก็ได้ที่คุณพอใจเช่น IIS, Apache เป็นต้น

การดูเพจของคุณ

ในกรณีส่วนใหญ่เราสามารถเปิดไฟล์ HTML ของคุณในเว็บเบราว์เซอร์เพื่อดูได้ อย่างไรก็ตามเมื่อโหลดแหล่งข้อมูลภายนอกการเรียกใช้เว็บเซิร์ฟเวอร์ภายในเครื่องและดูเพจของคุณจากเซิร์ฟเวอร์จะน่าเชื่อถือกว่า(http://localhost:8080).