DC.js - แนวคิด

DC.js นั้นง่ายและสะดวกสำหรับนักพัฒนาส่วนหน้าส่วนใหญ่ ช่วยให้สร้างแผนภูมิพื้นฐานได้อย่างรวดเร็วแม้ว่าจะไม่มีความรู้เกี่ยวกับ D3.js ก็ตาม ก่อนหน้านี้เราเริ่มใช้ DC.js เพื่อสร้างภาพ เราต้องทำความคุ้นเคยกับมาตรฐานเว็บ มาตรฐานเว็บต่อไปนี้ใช้กันมากใน D3.js ซึ่งเป็นรากฐานของ DC.js สำหรับการแสดงผลแผนภูมิ

ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML)
Document Object Model (DOM)
Cascading Style Sheets (CSS)

ให้เราทำความเข้าใจกับมาตรฐานเว็บเหล่านี้โดยละเอียด

ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML)

อย่างที่เราทราบกันดีว่า HTML ใช้ในการจัดโครงสร้างเนื้อหาของเว็บเพจ ซึ่งเก็บไว้ในไฟล์ข้อความที่มีนามสกุล“ .html”

ตัวอย่าง HTML พื้นฐานทั่วไปมีลักษณะดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

Document Object Model (DOM)

เมื่อเบราว์เซอร์โหลดเพจ HTML เพจนั้นจะถูกแปลงเป็นโครงสร้างแบบลำดับชั้น ทุกแท็กใน HTML จะถูกแปลงเป็นองค์ประกอบ / วัตถุใน DOM ด้วยลำดับชั้นแม่ลูก ทำให้ HTML ของเรามีโครงสร้างที่สมเหตุสมผลมากขึ้น เมื่อสร้าง DOM แล้วการจัดการ (เพิ่ม / แก้ไข / ลบ) องค์ประกอบบนหน้าจะง่ายขึ้น

ให้เราเข้าใจ DOM โดยใช้เอกสาร HTML ต่อไปนี้ -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

รูปแบบวัตถุเอกสารของเอกสาร HTML ข้างต้นมีดังนี้ -

Cascading Style Sheets (CSS)

แม้ว่า HTML จะมีโครงสร้างให้กับหน้าเว็บ แต่สไตล์ CSS ก็ทำให้หน้าเว็บดูน่ามองยิ่งขึ้น CSS เป็นภาษาสไตล์ชีตที่ใช้เพื่ออธิบายการนำเสนอเอกสารที่เขียนด้วย HTML หรือ XML (รวมถึงภาษา XML เช่น SVG หรือ XHTML) CSS อธิบายวิธีแสดงผลองค์ประกอบบนหน้าเว็บ

JavaScript

JavaScript เป็นภาษาสคริปต์ฝั่งไคลเอ็นต์ที่พิมพ์แบบหลวม ๆ ซึ่งรันในเบราว์เซอร์ของผู้ใช้ JavaScript โต้ตอบกับองค์ประกอบ html (องค์ประกอบ DOM) เพื่อให้อินเทอร์เฟซผู้ใช้บนเว็บโต้ตอบได้ JavaScript ใช้มาตรฐาน ECMAScript ซึ่งรวมถึงคุณสมบัติหลักตามข้อกำหนด ECMA-262 ตลอดจนคุณสมบัติอื่น ๆ ซึ่งไม่ได้เป็นไปตามมาตรฐาน ECMAScript ความรู้ JavaScript เป็นข้อกำหนดเบื้องต้นสำหรับ DC.js

ส่วนประกอบ

DC.js ใช้ไลบรารี JavaScript ที่ยอดเยี่ยมสองไลบรารีซึ่ง ได้แก่ -

Crossfilter
D3.js

Crossfilter

Crossfilter เป็นไลบรารี JavaScript สำหรับการสำรวจชุดข้อมูลหลายตัวแปรขนาดใหญ่ในเบราว์เซอร์ ใช้สำหรับการจัดกลุ่มการกรองและการรวมข้อมูลดิบหลายสิบหรือหลายแสนแถวอย่างรวดเร็ว

D3.js

D3.js ย่อมาจาก Data-Driven Documents D3.js เป็นไลบรารี JavaScript สำหรับจัดการเอกสารตามข้อมูล D3 คือ Dynamic, Interactive, Online Data Visualizations Framework และใช้ในเว็บไซต์จำนวนมาก D3.js เขียนโดยMike Bostockซึ่งสร้างขึ้นเพื่อสืบต่อจากชุดเครื่องมือการแสดงภาพก่อนหน้านี้ที่เรียกว่า Protovis. D3.js ถูกใช้บนเว็บไซต์หลายแสนแห่ง