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

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

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

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

การติดตั้ง DC.js

การติดตั้ง DC นั้นง่ายมากในการติดตั้ง ทำตามขั้นตอนด้านล่างเพื่อติดตั้งDCบนเครื่องของคุณ

ดาวน์โหลด DC Library

DC เป็นไลบรารีโอเพ่นซอร์ส ใช้ลิงค์https://github.com/dc-js/dc.js/releases เพื่อดาวน์โหลดไฟล์

ดาวน์โหลดเวอร์ชันล่าสุดของไฟล์ DC (ณ ตอนนี้เวอร์ชันล่าสุดคือ 2.0.2) หลังจากดาวน์โหลดเสร็จแล้วให้คลายซิปโฟลเดอร์ DC แล้ววางลงในโฟลเดอร์รูทของโปรเจ็กต์หรือโฟลเดอร์อื่น ๆ ที่คุณต้องการเก็บไฟล์ไลบรารีทั้งหมดของคุณ

ตัวอย่างหน้า HTML ดังที่แสดงด้านล่าง

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <script>
         // write your dc code here.. 
      </script>
   </body>
</html>

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

DC.js Editor

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

รหัส Visual Studio
WebStorm
Eclipse
SublimeText

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

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

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

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

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

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

การดูเพจ

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