DC.js - คู่มือฉบับย่อ

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

DC.js คืออะไร?

DC.js คือไลบรารีแผนภูมิสำหรับการสำรวจชุดข้อมูลหลายมิติขนาดใหญ่ มันอาศัยเอ็นจิ้น D3.js ในการแสดงผลแผนภูมิในรูปแบบ SVG ที่เป็นมิตรกับ CSS ช่วยให้สามารถแสดงภาพข้อมูลที่ซับซ้อนได้และมีแดชบอร์ดที่ออกแบบมาโดยมีแผนภูมิแท่ง, แผนภูมิกระจาย, แผนที่ความร้อน ฯลฯ DC.js สร้างขึ้นเพื่อทำงานร่วมกับCrossfilterสำหรับการจัดการข้อมูล DC.js ช่วยให้ชุดข้อมูลเดียว (ใหญ่) สามารถมองเห็นได้ด้วยแผนภูมิที่เชื่อมต่อกันจำนวนมากพร้อมด้วยตัวเลือกการกรองอัตโนมัติขั้นสูง

ทำไมเราต้องใช้ DC.js?

โดยทั่วไปการแสดงข้อมูลเป็นกระบวนการที่ค่อนข้างซับซ้อนและการดำเนินการในฝั่งไคลเอ็นต์ต้องใช้ทักษะพิเศษ DC.js ช่วยให้เราสามารถสร้างภาพข้อมูลที่ซับซ้อนได้เกือบทุกประเภทโดยใช้รูปแบบการเขียนโปรแกรมที่ง่ายกว่า เป็นโอเพ่นซอร์สที่ง่ายต่อการรับไลบรารี JavaScript ซึ่งช่วยให้เราสามารถใช้การแสดงภาพแบบกำหนดเองได้ในเวลาอันสั้น

แผนภูมิ DC.js เป็นข้อมูลที่ขับเคลื่อนและมีปฏิกิริยามาก นอกจากนี้ยังให้ข้อเสนอแนะทันทีสำหรับการโต้ตอบกับผู้ใช้โดยใช้ไฟล์Crossfilter Library.

คุณลักษณะ DC.js

DC.js เป็นหนึ่งในเฟรมเวิร์กการแสดงข้อมูลที่ดีที่สุดและสามารถใช้เพื่อสร้างการแสดงภาพที่เรียบง่ายและซับซ้อน คุณสมบัติเด่นบางประการมีดังต่อไปนี้ -

มีความยืดหยุ่นสูง
ง่ายต่อการใช้.
การแสดงผลแผนภูมิอย่างรวดเร็ว
รองรับชุดข้อมูลหลายมิติขนาดใหญ่
ไลบรารี JavaScript โอเพ่นซอร์ส

ประโยชน์ของ Dc.js

DC.js เป็นโครงการโอเพ่นซอร์สและต้องใช้รหัสน้อยกว่าเมื่อเทียบกับโครงการอื่น ๆ มาพร้อมกับสิทธิประโยชน์ดังต่อไปนี้ -

การแสดงข้อมูลที่ยอดเยี่ยม
ทำการกรองแบบกราฟิก
สร้างแผนภูมิและแดชบอร์ดได้อย่างรวดเร็ว
การสร้างแดชบอร์ดแบบโต้ตอบสูง

ในบทถัดไปเราจะเข้าใจวิธีการติดตั้ง D3.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

เราจะต้องมีตัวแก้ไขเพื่อเริ่มเขียนโค้ด มี 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).

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 ถูกใช้บนเว็บไซต์หลายแสนแห่ง

Crossfilter คือชุดข้อมูลหลายมิติ สนับสนุนการโต้ตอบที่รวดเร็วมากกับชุดข้อมูลที่มีบันทึกมากกว่าหนึ่งล้านรายการ

แนวคิดพื้นฐาน

Crossfilter ถูกกำหนดภายใต้เนมสเปซ crossfilter ใช้การกำหนดเวอร์ชันความหมาย พิจารณาวัตถุ crossfilter ที่เต็มไปด้วยคอลเลกชันของผลไม้ที่กำหนดไว้ด้านล่าง -

var fruits = crossfilter ([
   { name: “Apple”, type: “fruit”, count: 20 },
   { name: “Orange”, type: "fruit”, count: 10 },
   { name: “Grapes”, type: “fruit”, count: 50 },
   { name: “Mango”,  type: “fruit”, count: 40 }
]);

หากเราต้องการดำเนินการบันทึกทั้งหมดในกลุ่มเราสามารถใช้ฟังก์ชันต่อไปนี้ -

var count = fruits.groupAll().reduceCount().value();

หากเราต้องการกรองตามประเภทเฉพาะ -

var filtering = fruits.dimension(function(d) { return d.type; });
filtering.filter(“Grapes”)

ในทำนองเดียวกันเราสามารถทำการจัดกลุ่มด้วย Crossfilter ในการทำเช่นนี้เราสามารถใช้ฟังก์ชันต่อไปนี้ -

var grouping = filtering.group().reduceCount();
var first = grouping.top(2);

ดังนั้น Crossfilter จึงถูกสร้างขึ้นมาเพื่อให้ทำงานได้เร็วมาก หากคุณต้องการคำนวณกลุ่มใหม่เมื่อมีการใช้ตัวกรองระบบจะคำนวณแบบเพิ่มขึ้น ขนาดของ Crossfilter มีราคาแพงมาก

Crossfilter API

ให้เราดูรายละเอียดของ Crossfilter APIs ที่น่าทึ่ง

crossfilter([records])- ใช้เพื่อสร้าง crossfilter ใหม่ หากระบุเรกคอร์ดก็จะเพิ่มเร็กคอร์ดที่ระบุพร้อมกัน เร็กคอร์ดอาจเป็นอาร์เรย์ของอ็อบเจ็กต์ JavaScript หรือแบบดั้งเดิมก็ได้
crossfilter.add(records) - เพิ่มบันทึกที่ระบุลงใน crossfilter
crossfilter.remove() - ลบบันทึกทั้งหมดที่ตรงกับตัวกรองปัจจุบันจาก crossfilter
crossfilter.size() - ส่งคืนจำนวนเรกคอร์ดใน crossfilter
crossfilter.groupAll() - เป็นฟังก์ชันสำหรับจัดกลุ่มระเบียนทั้งหมดและลดให้เป็นค่าเดียว
crossfilter.dimension(value) - ใช้เพื่อสร้างมิติใหม่โดยใช้ฟังก์ชันตัวเข้าถึงค่าที่ระบุ
dimension.filter(value) - ใช้เพื่อกรองเร็กคอร์ดสำหรับค่าการจับคู่ของมิติและส่งกลับมิติ
dimension.filterRange(range) - กรองบันทึกค่าของมิติข้อมูลที่มากกว่าหรือเท่ากับช่วง [0] และน้อยกว่าช่วง [1]
dimension.filterAll() - ล้างตัวกรองในมิตินี้
dimension.top(k) - ใช้เพื่อส่งคืนอาร์เรย์ใหม่ที่มีระเบียน k ด้านบนตามลำดับธรรมชาติของมิติข้อมูลนี้
dimension.bottom(k) - ใช้เพื่อส่งคืนอาร์เรย์ใหม่ที่มีระเบียน k ด้านล่างตามลำดับธรรมชาติของมิติข้อมูลนี้
dimension.dispose() - ใช้เพื่อลบมิติออกจาก crossfilter

ในบทต่อไปเราจะทำความเข้าใจโดยสังเขปเกี่ยวกับ D3.js

D3.js เป็นไลบรารี JavaScript ที่ใช้ในการสร้างภาพแบบโต้ตอบในเบราว์เซอร์ ไลบรารี D3 ช่วยให้เราจัดการองค์ประกอบของเว็บเพจในบริบทของชุดข้อมูล องค์ประกอบเหล่านี้อาจเป็นองค์ประกอบ HTML, SVG หรือ Canvas และสามารถนำมาใช้ลบหรือแก้ไขได้ตามเนื้อหาของชุดข้อมูล เป็นไลบรารีสำหรับจัดการวัตถุ DOM D3.js เป็นตัวช่วยที่มีประโยชน์ในการสำรวจข้อมูล ช่วยให้คุณสามารถควบคุมการนำเสนอข้อมูลของคุณและช่วยให้คุณเพิ่มการโต้ตอบของข้อมูล

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

ให้เราเข้าใจแนวคิดพื้นฐานของ D3.js ซึ่งมีดังต่อไปนี้ -

Selections
เข้าร่วมข้อมูล
SVG
Transition
Animation
D3.js API

ให้เราเข้าใจแต่ละแนวคิดเหล่านี้โดยละเอียด

การเลือก

การเลือกเป็นหนึ่งในแนวคิดหลักใน D3.js มันขึ้นอยู่กับแนวคิด CSS Selector ผู้ที่เคยใช้และรู้จัก JQuery อยู่แล้วสามารถเข้าใจการเลือกได้อย่างง่ายดาย ช่วยให้เราสามารถเลือก DOM ตามตัวเลือก CSS จากนั้นมีตัวเลือกในการแก้ไขหรือต่อท้ายและลบองค์ประกอบของ DOM

เข้าร่วมข้อมูล

การรวมข้อมูลเป็นอีกหนึ่งแนวคิดที่สำคัญใน D3.js ทำงานร่วมกับการเลือกและช่วยให้เราสามารถจัดการเอกสาร HTML ที่เกี่ยวข้องกับชุดข้อมูลของเรา (ชุดของค่าตัวเลข) โดยค่าเริ่มต้น D3.js จะให้ชุดข้อมูลมีลำดับความสำคัญสูงสุดในวิธีการและแต่ละรายการในชุดข้อมูลจะสอดคล้องกับองค์ประกอบ HTML

SVG

SVG ย่อมาจาก Scalable Vector Graphics. SVG เป็นรูปแบบกราฟิกเวกเตอร์ที่ใช้ XML มันมีตัวเลือกในการวาดรูปทรงต่างๆเช่นเส้นสี่เหลี่ยมวงกลมวงรี ฯลฯ ดังนั้นการออกแบบการแสดงภาพด้วย SVG จึงให้พลังและความยืดหยุ่นมากขึ้น

การเปลี่ยนแปลง

SVG มีตัวเลือกในการแปลงองค์ประกอบรูปร่าง SVG เดียวหรือกลุ่มขององค์ประกอบ SVG SVG transform รองรับการแปล, ปรับขนาด, หมุนและเอียง

การเปลี่ยน

การเปลี่ยนเป็นกระบวนการเปลี่ยนจากสถานะหนึ่งไปเป็นอีกสถานะหนึ่งของรายการ D3.js มีวิธีการเปลี่ยน () เพื่อดำเนินการเปลี่ยนในหน้า HTML

ภาพเคลื่อนไหว

D3.js รองรับภาพเคลื่อนไหวตลอดการเปลี่ยนแปลง ภาพเคลื่อนไหวสามารถทำได้โดยใช้การเปลี่ยนอย่างเหมาะสม การเปลี่ยนภาพเป็นรูปแบบที่ จำกัด ของภาพเคลื่อนไหวคีย์เฟรมที่มีเพียงสองคีย์เฟรม:start และ end. โดยทั่วไปคีย์เฟรมเริ่มต้นคือสถานะปัจจุบันของ DOM และคีย์เฟรมสิ้นสุดคือชุดของแอตทริบิวต์สไตล์และคุณสมบัติอื่น ๆ ที่คุณระบุ การเปลี่ยนเหมาะอย่างยิ่งสำหรับการเปลี่ยนไปยังมุมมองใหม่โดยไม่ต้องใช้รหัสที่ซับซ้อนซึ่งขึ้นอยู่กับมุมมองเริ่มต้น

D3.js API

ให้เราเข้าใจวิธีการที่สำคัญของ D3.js API โดยสังเขป

Collections API

คอลเลกชันเป็นเพียงออบเจ็กต์ที่จัดกลุ่มองค์ประกอบต่างๆให้เป็นหน่วยเดียว เรียกอีกอย่างว่าเป็นภาชนะ ประกอบด้วยวัตถุแผนที่ชุดและรัง

Paths API

เส้นทางใช้ในการวาดรูปสี่เหลี่ยมวงกลมจุดไข่ปลาโพลีไลน์รูปหลายเหลี่ยมเส้นตรงและเส้นโค้ง SVG Paths แสดงโครงร่างของรูปร่างที่สามารถลากเติมเต็มใช้เป็นเส้นทางการตัดหรือทั้งสามอย่างผสมกันก็ได้

Axis API

D3.js มีฟังก์ชันในการวาดแกน แกนประกอบด้วยเส้นขีดและป้ายกำกับ แกนใช้มาตราส่วนดังนั้นแต่ละแกนจะต้องได้รับมาตราส่วนเพื่อใช้งานได้

Zooming API

การซูมช่วยในการปรับขนาดเนื้อหาของคุณ คุณสามารถมุ่งเน้นไปที่ภูมิภาคใดพื้นที่หนึ่งโดยใช้วิธีการคลิกและลาก

API ค่าคั่นระหว่างตัวคั่น

ตัวคั่นคือลำดับของอักขระตั้งแต่หนึ่งตัวขึ้นไปที่ใช้เพื่อระบุขอบเขตระหว่างพื้นที่แยกอิสระในข้อความธรรมดาหรือข้อมูลอื่น ๆ ตัวคั่นฟิลด์คือลำดับของค่าที่คั่นด้วยเครื่องหมายจุลภาค กล่าวโดยย่อคือค่าที่คั่นด้วยตัวคั่นคือ Comma-Separated Values (CSV) หรือ Tab-Separated Values (TSV)

Mixin คือ abstract functional objectมีฟังก์ชันที่กำหนดไว้ล่วงหน้าจำนวนมากซึ่งสามารถผสมและใช้ในคลาส JavaScript ได้ อย่างไรก็ตามไม่สามารถใช้เป็นแบบสแตนด์อโลนได้ ตัวอย่างเช่น DC.js มีไฟล์Mixin และ dc.baseMixinซึ่งไม่สามารถใช้งานได้เหมือนเดิม แต่ใช้โดยคลาสแผนภูมิ DC ทั้งหมดเช่นแผนภูมิเส้นแผนภูมิวงกลมเป็นต้น DC.js มีชุด Mixins ที่มีประโยชน์จำนวน จำกัด เพื่อสร้างแผนภูมิได้อย่างง่ายดายและมีประสิทธิภาพ มีดังนี้ -

baseMixin- baseMixin มีฟังก์ชันการทำงานทั่วไปสำหรับแผนภูมิทุกประเภท มันรวมไลบรารี crossfilter และ d3.js JavaScript และมีชุดฟังก์ชันง่ายๆในการสร้างแผนภูมิที่มีความรู้เกี่ยวกับ D3.js อย่าง จำกัด
capMixin - capMixin ให้การสนับสนุนการจัดกลุ่มสำหรับองค์ประกอบข้อมูลที่ต่ำกว่าขีด จำกัด (ขีด จำกัด )
colorMixin - colorMixin ให้การสนับสนุนสีสำหรับแผนภูมิ
marginMixin - marginMixin ให้การสนับสนุนระยะขอบสำหรับแผนภูมิ
coordinateGridMixin - CoordinateGridMixin ให้การสนับสนุนการประสานงานสำหรับแผนภูมิ
stackMixin - stackMixin ให้การสนับสนุนการซ้อนโดยใช้ไฟล์ d3.layout.stack.
bubbleMixin - bubbleMixin ให้การสนับสนุนฟองสำหรับแผนภูมิ

ให้เราเข้าใจรายละเอียดมิกซ์อินเหล่านี้ทั้งหมดในบทต่อ ๆ ไป

baseMixinมีวิธีการพื้นฐานที่จำเป็นในการสร้างแผนภูมิประเภทใดก็ได้ มีตั้งแต่การตั้งค่าความกว้างของแผนภูมิไปจนถึงการกรองแผนภูมิขั้นสูง

ตัวเลือกแผนภูมิทั่วไป

basicMixinมีวิธีการแผนภูมิมากมายเพื่อรับ / ตั้งค่าคุณสมบัติของแผนภูมิ มีดังนี้

chartID() - ส่งกลับ ID ตัวเลขภายในของแผนภูมิ
chartGroup( [chartGroup])- รับหรือตั้งค่ากลุ่มที่เป็นของแผนภูมิ ใน DC.js แผนภูมิสามารถจัดกลุ่มเป็นชุดเดียวได้ แผนภูมิทั้งหมดในกลุ่มคาดว่าจะแชร์ชุดข้อมูล Crossfilter เดียวกัน ซึ่งจะแสดงผลและวาดใหม่พร้อมกัน

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - ตั้งค่าความกว้างขั้นต่ำของแผนภูมิ

mychart.minWidth(300);

width( [width]) - รับหรือกำหนดความกว้างของแผนภูมิ

mychart.width(600);

minHeight( [minHeight]) - รับหรือกำหนดความสูงขั้นต่ำของแผนภูมิ

mychart.minHeight(300);

height( [height]) - รับหรือกำหนดความสูงของแผนภูมิ

mychart.height(300);

title( [titleFunction])- รับหรือตั้งค่าฟังก์ชันหัวเรื่อง Title คือชื่อขององค์ประกอบ SVG ขององค์ประกอบลูกในแผนภูมิ (เช่นแท่งเดียวในแผนภูมิแท่ง) ชื่อในแผนภูมิแสดงเป็นคำแนะนำเครื่องมือในเบราว์เซอร์

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

label( labelFunction[??]) - คล้ายกับเมธอด title () แต่ตั้งค่าป้ายกำกับแทนชื่อ

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

options(opts)- ตั้งค่าตัวเลือกแผนภูมิโดยใช้วัตถุ JavaScript แต่ละคีย์แสดงถึงวิธีการที่เกี่ยวข้องที่มีอยู่ในแผนภูมิและวิธีการที่ตรงกันจะถูกเรียกด้วยค่าที่เกี่ยวข้อง

mychart.options ({
   'width' : 300,
   'height' : 300
});

ที่นี่วิธีการ width () และ height () จะถูกยิงด้วยค่าที่ระบุ

legend( [legend])- แนบตำนานกับแผนภูมิ คำอธิบายแผนภูมิสามารถสร้างได้โดยใช้ไฟล์d3.legend() วิธี.

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

anchor( parent[??])- ตั้งค่าราก SVGElement ให้เป็นรูทของแผนภูมิที่มีอยู่หรือตัวเลือกเดี่ยว D3 ที่ถูกต้อง นอกจากนี้ยังสามารถตั้งค่ากลุ่มแผนภูมิโดยใช้อาร์กิวเมนต์ที่สอง
anchorName() - รับ DOM ID ของตำแหน่งที่ยึดของแผนภูมิ
svg( [svgElement]) - ส่งกลับ SVGElement ของแผนภูมิ
resetSvg() - รีเซ็ตคอนเทนเนอร์ SVG ใน DOM
root( [rootElement]) - รับคอนเทนเนอร์รูทของแผนภูมิ

ตัวเลือกข้อมูล

basicMixinมีวิธีการตั้งค่าข้อมูลสำหรับแผนภูมิ ข้อมูลถูกตั้งค่าเป็นมิติและกลุ่ม Crossfilter นอกจากนี้ยังมีตัวเลือกในการรับชุดข้อมูลพื้นฐาน

dimension( [dimension])- ตั้งค่าหรือรับขนาดของแผนภูมิ มิติข้อมูลคือมิติข้อมูล Crossfilter ที่ถูกต้อง

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

group( group[??])- ตั้งค่าหรือรับกลุ่มของแผนภูมิ กลุ่มคือกลุ่ม Crossfilter ที่ถูกต้อง สามารถตั้งชื่อกลุ่มโดยใช้อาร์กิวเมนต์ที่สองเพื่อใช้ในโค้ดในภายหลัง

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

data( [callback]) - ตั้งค่าการโทรกลับข้อมูลและช่วยให้เราได้รับชุดข้อมูลของแผนภูมิ

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

keyAccessor( [keyAccessor])- รับหรือตั้งค่าฟังก์ชันการเข้าถึงคีย์ ใช้เพื่อดึงคีย์จากกลุ่ม Crossfilter ที่อยู่เบื้องหลัง คีย์นี้ใช้สำหรับชิ้นส่วนในแผนภูมิวงกลมและแกน x ในแผนภูมิเส้น / แท่ง ค่าเริ่มต้นkey accessor ฟังก์ชั่นมีดังนี้ -

chart.keyAccessor(function(d) { return d.key; });

valueAccessor( [valueAccessor])- รับหรือตั้งค่าฟังก์ชันตัวเข้าถึงค่า ใช้เพื่อดึงค่าจากกลุ่ม Crossfilter ที่อยู่เบื้องหลัง ค่านี้ใช้สำหรับขนาดชิ้นส่วนในแผนภูมิวงกลมและตำแหน่งแกน y ในแผนภูมิเส้น / แท่ง ค่าเริ่มต้นvalue accessor ฟังก์ชั่นมีดังนี้ -

chart.valueAccessor(function(d) { return d.value; });

ordering( [orderFunction])- รับหรือตั้งค่าฟังก์ชันการสั่งซื้อเพื่อเรียงลำดับมิติข้อมูล ตามค่าเริ่มต้นแผนภูมิจะใช้crossfilter.quicksort.by เพื่อจัดเรียงองค์ประกอบ

_chart.ordering(dc.pluck('key'));

ตัวเลือกตัวกรอง

การกรองถือเป็นจุดเด่นอย่างหนึ่งของ DC.js เราสามารถใช้ตัวกรองตั้งแต่หนึ่งตัวขึ้นไปโดยตรงกับวัตถุแผนภูมิโดยใช้วิธีการกรอง () และเรียกวิธีการ redrawGroup () หรือ dc.redrawAll () ของแผนภูมิเพื่อดูผลการกรองบนแผนภูมิ ตามค่าเริ่มต้นออบเจ็กต์แผนภูมิจะใช้ตัวกรองตั้งแต่หนึ่งตัวขึ้นไปโดยใช้วิธีการกรอง () ใช้กับชุดข้อมูล Crossfilter () ที่อยู่ภายใต้รับข้อมูลที่กรองจาก Crossfilter และวาดแผนภูมิใหม่โดยใช้ข้อมูลที่กรองแล้ว DC.js มีวิธีจัดการการกรองในแผนภูมิดังต่อไปนี้

ตัวกรอง ([ตัวกรอง])

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

mychart.filter(10);

หากต้องการลบตัวกรองทั้งหมดให้เรียกใช้วิธีการกรองด้วย nullมูลค่า. ตัวกรองอาจเป็นรายการใดรายการหนึ่งต่อไปนี้ -

null - แผนภูมิจะลบตัวกรองทั้งหมดที่ใช้ก่อนหน้านี้
single value - แผนภูมิจะเรียกใช้วิธีการกรองของ Crossfilter และส่งค่าที่ให้มา
dc.filters.RangedFilter- ยอมรับสองค่าต่ำและสูง แผนภูมิจะกรองข้อมูลทั้งหมดออกยกเว้นค่าในช่วงระหว่างค่าต่ำและค่าสูง
dc.filters.TwoDimensionalFilter - ยอมรับค่าสองมิติที่ใช้ในแผนที่ความร้อน
dc.filters.RangedTwoDimensionalFilter - คล้ายกับ dc.filters.RangedFilter ยกเว้นว่าจะยอมรับค่าสองมิติที่ใช้ในแปลงกระจายเท่านั้น

hasFilter ([ตัวกรอง])

ตรวจสอบว่ามีตัวกรองที่ให้มาหรือไม่ในแผนภูมิ

แทนที่ฟิลเตอร์ ([ตัวกรอง])

แทนที่ตัวกรองปัจจุบันของแผนภูมิด้วยตัวกรองที่ให้มา

ตัวกรอง ()

ส่งคืนตัวกรองปัจจุบันทั้งหมดที่เกี่ยวข้องกับแผนภูมิ

ตัวกรองทั้งหมด ()

ล้างตัวกรองทั้งหมดที่เกี่ยวข้องกับแผนภูมิ

filterHandler ([filterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรอง แผนภูมิใช้ฟังก์ชันตัวจัดการตัวกรองเพื่อกรองชุดข้อมูลพื้นฐานโดยใช้ตัวกรอง แผนภูมิมีฟังก์ชันตัวจัดการตัวกรองเริ่มต้นและสามารถแทนที่ได้ด้วยฟังก์ชันตัวจัดการตัวกรองแบบกำหนดเองโดยใช้วิธีนี้ ตัวจัดการตัวกรองเริ่มต้นมีดังนี้ -

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการมีตัวกรอง แผนภูมิใช้ฟังก์ชันนี้เพื่อตรวจสอบว่ามีตัวกรองอยู่ในคอลเล็กชันตัวกรองของแผนภูมิหรือไม่ ตัวจัดการตัวกรองมีค่าเริ่มต้นมีดังนี้ -

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรองเพิ่มเติม แผนภูมิใช้ฟังก์ชันนี้เพื่อเพิ่มตัวกรองลงในคอลเล็กชันตัวกรองของแผนภูมิ ตัวจัดการการเพิ่มตัวกรองเริ่มต้นมีดังนี้ -

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการการลบตัวกรอง แผนภูมิใช้ฟังก์ชันนี้เพื่อลบตัวกรองออกจากคอลเล็กชันตัวกรองของแผนภูมิ ค่าเริ่มต้นลบตัวกรองมีดังนี้ -

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

resetFilterHandler ([resetFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรองการรีเซ็ต แผนภูมิใช้ฟังก์ชันนี้เพื่อรีเซ็ตคอลเล็กชันตัวกรองของแผนภูมิ ค่าเริ่มต้นรีเซ็ตตัวกรองมีดังนี้ -

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

รับหรือตั้งค่าฟังก์ชันตัวกรองเครื่องพิมพ์ แผนภูมิใช้ฟังก์ชันนี้เพื่อพิมพ์ข้อมูลตัวกรอง

กระทำตัวจัดการ ()

รับหรือตั้งค่าตัวจัดการการคอมมิต วัตถุประสงค์ของตัวจัดการการคอมมิตคือการส่งข้อมูลที่กรองไปยังเซิร์ฟเวอร์แบบอะซิงโครนัส

ตัวเลือกเหตุการณ์

DC.js กำหนดชุดเหตุการณ์ที่ จำกัด เพื่อทำฟังก์ชันบางอย่างเช่นการกรองการซูมเป็นต้นรายการของเหตุการณ์ที่กำหนดใน DC.js มีดังต่อไปนี้ -

renderlet - เริ่มทำงานหลังจากการเปลี่ยนภาพจะถูกวาดใหม่และแสดงผล
pretransition - เริ่มทำงานก่อนการเปลี่ยนแปลงจะเริ่มขึ้น
preRender - เริ่มทำงานก่อนการแสดงผลแผนภูมิ
postRender - เริ่มทำงานหลังจากการแสดงผลแผนภูมิเสร็จสิ้นรวมถึงตรรกะของ renderlet ทั้งหมด
preRedraw - เริ่มทำงานก่อนที่จะวาดแผนภูมิใหม่
postRedraw - เริ่มทำงานหลังจากแผนภูมิเสร็จสิ้นการวาดใหม่รวมถึงตรรกะของ renderlet ทั้งหมด
filtered - เริ่มทำงานหลังจากใช้ตัวกรองเพิ่มหรือลบออก
zoomed - เริ่มทำงานหลังจากการซูมถูกเรียกใช้

basicMixin ให้วิธีการ on(event, listener) เพื่อตั้งค่าฟังก์ชันการโทรกลับสำหรับเหตุการณ์ที่กำหนดไว้ข้างต้นทั้งหมด

on(event, listener) - ตั้งค่าฟังก์ชันการโทรกลับหรือฟังสำหรับเหตุการณ์เฉพาะ
onClick(datum)- ส่งผ่านไปยัง D3 เป็นตัวจัดการ onClick สำหรับแต่ละแผนภูมิ ลักษณะการทำงานเริ่มต้นคือการกรองข้อมูลที่คลิก (ส่งผ่านไปยังการเรียกกลับ) และวาดกลุ่มแผนภูมิใหม่

ตัวเลือกการแสดงผล

BasicMixin มีรายการวิธีการแสดงผลแผนภูมิ ใช้ในการวาดแผนภูมิและมีดังนี้ -

render()- แสดงผลแผนภูมิ โดยทั่วไปจะใช้ก่อนเมื่อวาดแผนภูมิ
renderGroup() - แสดงผลแผนภูมิทั้งหมดในกลุ่มตามที่เป็นของแผนภูมินี้
renderLabel( [renderLabel]) - เปิด / ปิดการแสดงฉลาก
renderTitle( [renderTitle]) - เปิด / ปิดการแสดงผลชื่อเรื่อง
redraw() - วาดใหม่ทั้งแผนภูมิ
redrawGroup() - วาดแผนภูมิทั้งหมดในกลุ่มใหม่เนื่องจากแผนภูมินี้เป็นของ

ตัวเลือกการเปลี่ยน

BasicMixin มีวิธีการตั้งค่าผลการเปลี่ยนแปลงของแผนภูมิและมีดังนี้ -

transitionDelay( [delay]) - ตั้งค่าหรือรับความล่าช้าในการเปลี่ยนภาพเคลื่อนไหว (เป็นมิลลิวินาที) สำหรับอินสแตนซ์แผนภูมินี้
transitionDuration( [duration]) - ตั้งค่าหรือรับระยะเวลาการเปลี่ยนภาพเคลื่อนไหว (ในหน่วยมิลลิวินาที) สำหรับอินสแตนซ์แผนภูมินี้
useViewBoxResizing( [useViewBoxResizing]) - หากตั้งค่าไว้ให้ปรับขนาดแผนภูมิตามแอตทริบิวต์ SVG viewbox
controlsUseVisibility( [controlsUseVisibility]) - หากตั้งค่าให้ใช้แอตทริบิวต์การมองเห็นแทนแอตทริบิวต์การแสดงผลเพื่อแสดง / ซ่อนการรีเซ็ตแผนภูมิและการควบคุมตัวกรอง

ในบทต่อไปเราจะเข้าใจ capMixin

capMixinช่วยให้สามารถจัดกลุ่มรายการองค์ประกอบข้อมูลด้านล่างค่าที่กำหนดเป็น 'อื่น ๆ ' ใช้ได้ทั้งในแผนภูมิแถวและแผนภูมิวงกลม ลำดับชั้นของ capMixin เป็นไปตามที่กำหนดไว้ในแผนภาพด้านล่าง

capMixin มีสี่วิธีในการค้นหาส่วนอื่น ๆ และมีดังนี้ -

Method 1: cap( [count]) - รับหรือตั้งค่าจำนวนองค์ประกอบที่จะรวมอยู่ในหมวก

Method 2: othersGrouper( [grouperFunction])- รับหรือตั้งค่าฟังก์ชันเพื่อทำกลุ่ม 'อื่น ๆ ' ฟังก์ชันเริ่มต้นที่มีให้มีดังนี้

chart.othersGrouper(function (topItems, restItems) {
   var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
   restKeys = restItems.map(_chart.keyAccessor());
   
   if (restItemsSum > 0) {
      return topItems.concat([{
         others: restKeys,
         key: _chart.othersLabel(),
         value: restItemsSum
      }]);
   }
   return topItems;
});

Method 3: othersLabel( [label]) - รับหรือตั้งค่าป้ายกำกับสำหรับกลุ่ม "คนอื่น"

Method 4: takeFront( [takeFront])- รับหรือกำหนดทิศทางของการกำหนด หากตั้งค่าไว้แผนภูมิจะนำรายการด้านหน้าจากอาร์เรย์ขององค์ประกอบข้อมูลที่เรียงลำดับ มิฉะนั้นจะใช้รายการสุดท้าย

colorMixinให้การสนับสนุนสีสำหรับแผนภูมิทั้งหมดซึ่งจำเป็นต้องเห็นภาพโดยใช้สี ลำดับชั้นของ colorMixin ถูกกำหนดไว้ในแผนภาพด้านล่าง

colorMixin มีรายการวิธีการทำงานกับสีดังต่อไปนี้และมีดังต่อไปนี้ -

colorAccessor ([colorAccessor])

รับหรือตั้งค่าฟังก์ชันตัวเข้าถึงสี ซึ่งจะจับคู่ค่าสีที่แตกต่างกันในระดับสีสำหรับจุดข้อมูลแต่ละจุดในกลุ่ม Crossfilter ที่อยู่ข้างใต้ ตัวเข้าถึงสีเริ่มต้นมีดังนี้ -

mychart.colorAccessor(function (d, i){return i;})

colorDomain ([โดเมน])

รับหรือตั้งค่าโดเมนปัจจุบันสำหรับฟังก์ชันการแมปสีและต้องระบุเป็นอาร์เรย์

คำนวณColorDomain ()

ตั้งค่าโดเมนสีโดยกำหนดค่าต่ำสุดและสูงสุดขององค์ประกอบข้อมูลที่พบโดยใช้ฟังก์ชัน colorAccessor ()

สี ([colorScale])

รับหรือกำหนดระดับสี ยอมรับไฟล์d3.scale.

chart.colors(d3.scale.category20b());
chart.colors(d3.scale.ordinal().range(['red','green','blue']));

LinearColors (r)

วิธีทางลัดในการตั้งค่ามาตราส่วนสีเชิงเส้นแบบสอดแทรก

chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);

ลำดับสี (r)

วิธีทางลัดในการตั้งค่าระดับสีลำดับ

chart.ordinalColors(['red','green','blue']);

marginMixinมีฟังก์ชันยูทิลิตี้ระยะขอบสำหรับทั้งแผนภูมิแถวและแผนภูมิตารางพิกัด ลำดับชั้นของ marginMixin ถูกกำหนดไว้ในแผนภาพด้านล่าง

marginMixin มีวิธีการเดียวในการตั้งค่าระยะขอบสำหรับแผนภูมิตามแกนที่ประสานกัน

ระยะขอบ ([ระยะขอบ])

รับหรือกำหนดระยะขอบซ้ายขวาบนและล่างของแผนภูมิ ระยะขอบเริ่มต้นของแผนภูมิมีดังนี้ -

a. Right - 50
a. Left - 30
a. Top - 10
a. Bottom - 30

var rightMargin = chart.margins().right; // 50 by default
chart.margins().bottom = 60;

พิกัดและแกนเรียกอีกอย่างว่า coordinateGridMixin ได้รับการออกแบบมาเพื่อรองรับประเภทแผนภูมิคอนกรีตตามตารางพิกัดเช่นแผนภูมิแท่งแผนภูมิเส้นเป็นต้นลำดับชั้นของ CoordinationGridMixin ถูกกำหนดไว้ในแผนภาพด้านล่าง

CoordinateGridMixin สนับสนุนวิธีการต่างๆเพื่อลดภาระงานในการสร้างแกนพิกัดและมีดังต่อไปนี้ -

brushOn ([brushOn])
chartBodyG ([ร่างกาย])
clipPadding ([แผ่นรอง])
ยืดหยุ่น X ([X])
โฟกัส ([ช่วง])
g ([ราก])
isOrdinal()
mouseZoomable ([ซูม])
rangeChart ([ช่วง])
round(r)
xAxisMax()
xAxisMin()
xUnitCount()

ให้เราพูดถึงวิธีการเหล่านี้โดยย่อ

brushOn ([brushOn])

เป็นตัวกรองช่วงที่ใช้แปรง คุณสามารถตั้งค่าเปิด / ปิด หากเปิดแปรงอยู่ผู้ใช้สามารถลากเมาส์ข้ามแผนภูมิ การเปิดสามารถปิดใช้งานองค์ประกอบเชิงโต้ตอบอื่น ๆ บนแผนภูมิเช่นการไฮไลต์เคล็ดลับเครื่องมือและเส้นอ้างอิง มีการกำหนดไว้ด้านล่าง -

chart.brushOn = function (brushOn) {
   if (!arguments.length) {
      return _brushOn;
   }
   _brushOn = brushOn;
   return chart;
};

chartBodyG ([ร่างกาย])

ใช้เพื่อดึงกลุ่ม SVG สำหรับเนื้อหาแผนภูมิ คุณสามารถเรียกใช้ฟังก์ชันนี้ได้ดังที่แสดงด้านล่าง -

chart.chartBodyG = function (body) {
   if (!arguments.length) {
      return _chartBodyG;
   }
};

clipPadding ([แผ่นรอง])

ใช้เพื่อรับหรือตั้งค่าช่องว่างในหน่วยพิกเซลสำหรับเส้นทางคลิป มีการกำหนดไว้ด้านล่าง -

chart.clipPadding = function (pad) {
   if (!arguments.length) {
      return _clipPadding;
   }   
};

ยืดหยุ่น X ([X])

วิธีนี้ใช้เพื่อเปิด / ปิดพฤติกรรมแกน x ที่ยืดหยุ่น หากความยืดหยุ่นของแกน x เปิดอยู่แผนภูมิกริดจะพยายามคำนวณช่วงแกน x ใหม่ ทริกเกอร์เหตุการณ์วาดใหม่ที่กำหนดไว้ด้านล่าง -

chart.elasticX = function (X) {
   if (!arguments.length) {
      return _x;
   }
}

ในทำนองเดียวกันคุณสามารถใช้ elasticY ([Y])

โฟกัส ([ช่วง])

วิธีนี้ใช้ในการซูมแผนภูมิเพื่อโฟกัสไปที่ช่วงที่กำหนด ช่วงที่กำหนดควรเป็นอาร์เรย์ที่มีเพียงสององค์ประกอบ ([start, end])

g ([ราก])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าองค์ประกอบ root g

isOrdinal ()

วิธีนี้ใช้เพื่อส่งคืนลำดับ xUnits ของแผนภูมิ แผนภูมิส่วนใหญ่ทำงานแตกต่างกับข้อมูลลำดับและใช้ผลลัพธ์ของวิธีนี้เพื่อเรียกใช้ตรรกะที่เหมาะสม

mouseZoomable ([ซูม])

วิธีนี้ใช้เพื่อตั้งค่าหรือรับความสามารถในการซูมของเมาส์

rangeChart ([ช่วง])

ใช้เพื่อรับหรือตั้งค่าแผนภูมิการเลือกช่วงที่เกี่ยวข้องกับอินสแตนซ์

รอบ (r)

วิธีนี้ใช้เพื่อตั้งค่าหรือรับฟังก์ชันการปัดเศษที่ใช้ในการกำหนดจำนวนการเลือกเมื่อเปิดใช้งานการแปรงฟัน

xAxisMax ()

คำนวณค่า x สูงสุดที่จะแสดงในแผนภูมิ ในทำนองเดียวกันเราสามารถดำเนินการสำหรับแกน Y

xAxisMin ()

คำนวณค่า x ต่ำสุดที่จะแสดงในแผนภูมิ ในทำนองเดียวกันเราสามารถดำเนินการสำหรับแกน Y

xUnitCount ()

ส่งคืนจำนวนหน่วยที่แสดงบนแกน x ในทำนองเดียวกันเราสามารถดำเนินการสำหรับแกน Y

แผนภูมิวงกลมคือกราฟสถิติแบบวงกลม แบ่งออกเป็นชิ้น ๆ เพื่อแสดงสัดส่วนที่เป็นตัวเลข บทนี้จะอธิบายวิธีการวาดแผนภูมิวงกลมโดยใช้ DC.js โดยละเอียด

วิธีการแผนภูมิวงกลม

ก่อนที่จะวาดแผนภูมิวงกลมเราควรทำความเข้าใจกับไฟล์ dc.pieChartคลาสและวิธีการ dc.pieChart ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ มิกซ์อินที่ใช้โดย dc.pieChart มีดังนี้ -

baseMixin
capMixin
colorMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.pieChart มีดังนี้ -

dc.pieChart ได้รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้นรวมทั้งมีวิธีการของตัวเองในการวาดแผนภูมิวงกลมโดยเฉพาะ มีดังนี้ -

cx ([cx])
drawPaths ([เส้นทาง])
emptyTitle ([ชื่อ])
externalLabels ([ป้ายกำกับ])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
รัศมี ([รัศมี])
slicesCap ([หมวก])

ให้เราคุยรายละเอียดแต่ละเรื่องเหล่านี้

cx ([cx])

ใช้เพื่อรับหรือกำหนดตำแหน่งพิกัดกลาง x ซึ่งกำหนดไว้ด้านล่าง -

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

ในทำนองเดียวกันคุณสามารถดำเนินการตำแหน่งพิกัด y

drawPaths ([เส้นทาง])

วิธีนี้ใช้เพื่อวาดเส้นทางสำหรับแผนภูมิวงกลมและกำหนดไว้ด้านล่าง -

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([ชื่อ])

วิธีนี้ใช้เพื่อตั้งหัวเรื่องเมื่อไม่มีข้อมูล มีการกำหนดไว้ด้านล่าง -

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([ป้ายกำกับ])

ใช้เพื่อวางตำแหน่งป้ายสไลซ์ที่ชดเชยจากขอบด้านนอกของแผนภูมิ มีการกำหนดไว้ด้านล่าง -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

วิธีนี้ใช้เพื่อรับหรือกำหนดรัศมีด้านในของแผนภูมิวงกลม ถ้ารัศมีภายในมากกว่า0pxจากนั้นแผนภูมิวงกลมจะแสดงผลเป็นแผนภูมิโดนัท มีการกำหนดไว้ด้านล่าง -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

วิธีนี้ใช้เพื่อรับหรือตั้งค่ามุมชิ้นเล็กที่สุดสำหรับการแสดงฉลาก มีการกำหนดไว้ด้านล่าง -

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

รัศมี ([รัศมี])

วิธีนี้ใช้เพื่อรับหรือกำหนดรัศมีด้านนอก หากไม่ได้ระบุรัศมีจะใช้เวลาครึ่งหนึ่งของความกว้างและความสูงขั้นต่ำของแผนภูมิ มีการกำหนดไว้ด้านล่าง -

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap ([หมวก])

รับหรือกำหนดจำนวนชิ้นสูงสุดที่แผนภูมิวงกลมจะสร้าง ชิ้นบนจะถูกกำหนดโดยค่าจากสูงไปต่ำ ชิ้นอื่น ๆ ที่เกินฝาจะถูกม้วนเป็นชิ้นเดียว 'อื่น ๆ '

วาดแผนภูมิวงกลม

ให้เราสร้างแผนภูมิวงกลมใน DC ในตัวอย่างแผนภูมิวงกลมนี้ให้เราใช้ชุดข้อมูลที่ชื่อpeople.csvไฟล์. ไฟล์ข้อมูลตัวอย่างมีดังนี้ -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

ตัวอย่างข้างต้นประกอบด้วยระเบียนจำนวนมาก คุณสามารถดาวน์โหลดไฟล์ได้โดยคลิกที่ลิงค์ต่อไปนี้และบันทึกลงในตำแหน่ง DC

people.csv

ตอนนี้ให้เราปฏิบัติตามขั้นตอนต่อไปนี้เพื่อวาดแผนภูมิวงกลมใน DC

ขั้นตอนที่ 1: รวมสคริปต์

ให้เราเพิ่ม D3, DC และ Crossfilter โดยใช้รหัสต่อไปนี้ -

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

ขั้นตอนที่ 2: กำหนดตัวแปร

สร้างวัตถุประเภท dc.pieChart ดังแสดงด้านล่าง -

var pieChart = dc.pieChart('#pie');

ที่นี่รหัสพายจะถูกจับคู่กับพาย

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลของคุณ (พูดจาก people.csv) โดยใช้ไฟล์ d3.csv()ฟังก์ชัน มีกำหนดดังนี้ -

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

ที่นี่หากไฟล์ข้อมูลไม่พร้อมใช้งานในตำแหน่งที่ระบุฟังก์ชัน d3.csv () จะส่งกลับข้อผิดพลาด

ขั้นตอนที่ 4: กำหนด Crossfilter

Define a variable for Crossfilter and assign the data to Crossfilter. It is defined below −

var mycrossfilter = crossfilter(people);

Step 5: Create a Dimension

Create a dimension for gender using the function below −

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Here, the Gender of the people is used for dimension.

Step 6: reduceCount()

Create a Crossfilter group by applying the group() and the reduceCount() function on the above created gender dimension - groupDimension.

var genderGroup = genderDimension.group().reduceCount();

Step 7: Generate Pie

Generate the pie using the function below −

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Here,

Width of the pie chart is set to 800.
Height of the pie chart is set to 300.
Dimension of the pie chart is set to genderDimension using the dimension() method.
Group of the pie chart is set to genderGroup using the group() method.
Added a click event to log the data using the DC.js built-in event, renderlet(). The renderlet is invoked, whenever the chart is rendered or drawn.

Step 8: Working Example

Create a new html file, pie.html and include all the above steps as shown below −

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

แผนภูมิเส้นใช้เพื่อแสดงข้อมูลเป็นชุดของจุดข้อมูลที่เชื่อมต่อกันด้วยเส้นตรง จุดข้อมูลแสดงถึงสองค่าโดยหนึ่งพล็อตตามแกนแนวนอนและอีกจุดหนึ่งตามแกนแนวตั้ง ตัวอย่างเช่นความนิยมของรายการอาหารสามารถวาดเป็นแผนภูมิเส้นในลักษณะที่รายการอาหารแสดงตามแกน x และความนิยมจะแสดงตามแกน y บทนี้จะอธิบายเกี่ยวกับแผนภูมิเส้นโดยละเอียด

วิธีแผนภูมิเส้น

ก่อนที่จะดำเนินการวาดแผนภูมิเส้นเราควรทำความเข้าใจกับไฟล์ dc.lineChartคลาสและวิธีการ dc.lineChart ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixins ที่ใช้โดย dc.lineChart มีดังนี้ -

dc.stackMixin
dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.lineChart มีดังนี้ -

dc.lineChart ได้รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้นรวมทั้งมีวิธีการของตัวเองในการวาดแผนภูมิเส้น มีคำอธิบายดังนี้

dashStyle ([สไตล์])

วิธีนี้ใช้เพื่อกำหนดลักษณะเส้นประสำหรับแผนภูมิเส้น

dotRadius ([รัศมี])

วิธีนี้ใช้เพื่อรับหรือกำหนดรัศมี (เป็น PX) สำหรับจุดที่แสดงบนจุดข้อมูล มีกำหนดดังนี้ -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

สอดแทรก ([i])

วิธีนี้ใช้เพื่อรับหรือตั้งค่า interpolator สำหรับบรรทัด

renderArea ([พื้นที่])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าพื้นที่การแสดงผล

renderDataPoints ([ตัวเลือก])

วิธีนี้ใช้เพื่อแสดงจุดแต่ละจุดสำหรับจุดข้อมูลแต่ละจุด

ความตึงเครียด ([ความตึงเครียด])

วิธีนี้ใช้รับหรือตั้งค่าความตึงของเส้นที่วาด อยู่ในช่วงตั้งแต่ 0 ถึง 1

xyTipsOn ([xyTipsOn])

วิธีนี้ใช้เพื่อเปลี่ยนลักษณะการทำงานของเมาส์ของจุดข้อมูลแต่ละจุด

วาดแผนภูมิเส้น

ให้เราวาดแผนภูมิเส้นใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

var chart = dc.lineChart('#line');

ที่นี่ฟังก์ชัน dc.linechart จะถูกแมปกับคอนเทนเนอร์ที่มีไฟล์ id line.

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv ไฟล์ -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

ที่นี่ถ้าเราใช้ชุดข้อมูล people.csv เดียวกันไฟล์ข้อมูลตัวอย่างจะเป็นดังนี้ -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

...............
................
................

ขั้นตอนที่ 3: สร้างมิติข้อมูลอายุ

ตอนนี้สร้างมิติสำหรับอายุดังแสดงด้านล่าง -

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

ที่นี่เรากำหนดอายุจากข้อมูล Crossfilter

~~ เป็นตัวดำเนินการแบบไม่ใช้บิตคู่ ใช้แทนไฟล์Math.floor() ฟังก์ชัน

ตอนนี้จัดกลุ่มโดยใช้ไฟล์ reduceCount() ฟังก์ชันซึ่งกำหนดไว้ด้านล่าง -

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 4: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิเส้นโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

ที่นี่

ความกว้างของแผนภูมิคือ 800 และความสูง 300
ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างสเกลเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [15, 70]
ต่อไปเราตั้งค่า brushOn ค่าเป็นเท็จ
เรากำหนดป้ายชื่อแกน y เป็น count และป้ายชื่อแกน x เป็น age.
สุดท้ายจัดกลุ่มอายุโดยใช้ ageGroup.

ขั้นตอนที่ 5: ตัวอย่างการทำงาน

รายการรหัสที่สมบูรณ์จะแสดงในบล็อกรหัสต่อไปนี้ สร้างเว็บเพจline.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

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

แกน x (แกนนอน) แสดงถึงหมวดหมู่ต่างๆที่ไม่มีมาตราส่วน แกน y (แกนตั้ง) มีมาตราส่วนและแสดงหน่วยวัด แถบสามารถวาดได้ทั้งแนวตั้งหรือแนวนอนขึ้นอยู่กับจำนวนหมวดหมู่และความยาวหรือความซับซ้อนของหมวดหมู่

วิธีการแผนภูมิแท่ง

ก่อนที่จะย้ายไปวาดแผนภูมิแท่งเราควรทำความเข้าใจกับไฟล์ dc.barChartคลาสและวิธีการ dc.barChart ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixins ที่ใช้โดย dc.barChart มีดังนี้ -

dc.stackMixin
dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.barChart มีดังนี้ -

dc.barChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น นอกจากนี้มันยังมีวิธีการของตัวเองในการวาดแผนภูมิแท่ง มีคำอธิบายดังนี้ -

alwaysUseRounding ([รอบ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าว่าจะเปิดใช้งานการปัดเศษหรือไม่เมื่อแท่งอยู่ตรงกลาง

barPadding ([แผ่นรอง])

วิธีนี้ใช้เพื่อรับหรือกำหนดระยะห่างระหว่างแท่งเป็นเศษส่วนของขนาดแท่ง ค่า padding ที่เป็นไปได้อยู่ระหว่าง 0-1

centerBar ([centerBar])

วิธีนี้ใช้เพื่อกำหนดแถบโดยให้อยู่กึ่งกลางรอบตำแหน่งข้อมูลบนแกน x

ช่องว่าง ([ช่องว่าง])

วิธีนี้ใช้เพื่อกำหนดช่องว่างคงที่ระหว่างแท่ง

outerPadding ([แผ่นรอง])

วิธีนี้ใช้เพื่อตั้งค่าช่องว่างด้านนอกบนแผนภูมิแท่งลำดับ

วาดแผนภูมิแท่ง

ให้เราวาดแผนภูมิแท่งใน DC ในการดำเนินการนี้เราควรทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรแผนภูมิตามที่แสดงด้านล่าง -

var chart = dc.barChart('#bar');

ที่นี่ฟังก์ชัน dc.barChart ถูกแมปกับคอนเทนเนอร์ที่มี bar เป็นรหัส

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ Crossfilter สำหรับตัวอย่างนี้เราจะใช้ไฟล์ people.csv เดียวกันซึ่งมีลักษณะดังนี้ -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay
..................
..................
..................

ขั้นตอนที่ 3: สร้างมิติข้อมูลอายุ

ตอนนี้สร้างมิติสำหรับอายุดังที่แสดงด้านล่าง -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

ที่นี่เรากำหนดอายุจากข้อมูล Crossfilter ~~ เป็นตัวดำเนินการแบบไม่ใช้บิตคู่ ใช้แทนไฟล์Math.floor() ฟังก์ชัน

ตอนนี้จัดกลุ่มโดยใช้ไฟล์ reduceCount() ฟังก์ชันที่แสดงด้านล่าง -

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 4: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิแท่งโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

ที่นี่

ความกว้างของแผนภูมิคือ 800 และความสูง 300
ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างสเกลเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [15, 70]
ต่อไปเราตั้งค่า brushOn เป็นเท็จ
เรากำหนดป้ายชื่อแกน y เป็นป้ายกำกับจำนวนและแกน x ตามอายุ
สุดท้ายจัดกลุ่มอายุโดยใช้ฟังก์ชัน ageGroup

ขั้นตอนที่ 5: ตัวอย่างการทำงาน

รายการรหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจbar.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC Bar chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

แผนภูมิประกอบเป็นแผนภูมิประเภทพิเศษที่จัดทำโดย DC.js มีตัวเลือกในการแสดงผลหลายแผนภูมิในตารางพิกัดเดียวกัน แผนภูมิประกอบเปิดใช้ตัวเลือกการแสดงภาพแผนภูมิขั้นสูงโดยมีบรรทัดรหัสขั้นต่ำ

วิธีการแผนภูมิประกอบ

ก่อนที่จะดำเนินการวาดแผนภูมิประกอบเราจำเป็นต้องเข้าใจไฟล์ dc.compositeChartคลาสและวิธีการ dc.compositeChart ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixins ที่ใช้โดย dc.compositeChart มีดังนี้ -

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.barChart มีดังนี้ -

dc.compositeChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น มีวิธีการของตัวเองในการวาดแผนภูมิประกอบซึ่งอธิบายไว้ด้านล่าง -

เขียน ([subChartArray])

ตั้งค่าคอลเล็กชันของแผนภูมิที่จะแสดงผลในแผนภูมิกริดพิกัดเดียวกัน

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

เด็ก ()

รับแผนภูมิทั้งหมดที่ประกอบขึ้นในตารางพิกัดเดียวกัน

childOptions ([childOptions])

รับหรือตั้งค่าตัวเลือกแผนภูมิสำหรับแผนภูมิลูกทั้งหมดที่ประกอบในตารางพิกัดเดียวกัน

shareTitle ([shareTitle])

รับหรือตั้งชื่อที่ใช้ร่วมกันของแผนภูมิ หากตั้งค่าไว้ระบบจะแชร์กับแผนภูมิย่อยทั้งหมดที่อยู่ในตารางพิกัดเดียวกัน

shareColors ([shareColors])

คล้ายกับฟังก์ชัน shareTitle () ยกเว้นจะแชร์สีแทนชื่อเรื่อง

rightY ([yScale])

รับหรือตั้งค่ามาตราส่วน y สำหรับแกนด้านขวาของแผนภูมิผสม

rightYAxis ([rightYAxis])

รับหรือตั้งค่าแกน y ที่ถูกต้องของแผนภูมิผสม

rightYAxisLabel (rightYAxisLabel [??])

รับหรือตั้งค่าป้ายชื่อแกน y ที่ถูกต้อง

alignYAxes ([alignYAxes])

รับหรือตั้งค่าการจัดแนวระหว่างแกน y ซ้ายและขวา

useRightAxisGridLines ([useRightAxisGridLines])

รับหรือตั้งค่าว่าจะวาดเส้นตารางจากแกน y ด้านขวาของแผนภูมิผสมหรือไม่ พฤติกรรมเริ่มต้นคือการวาดจากแกน y ด้านซ้าย

วาดแผนภูมิประกอบ

ให้เราวาดแผนภูมิประกอบโดยใช้ DC.js ในการดำเนินการนี้เราควรทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรแผนภูมิตามที่แสดงด้านล่าง -

var chart = dc.compositeChart('#compoiste');

ที่นี่ฟังก์ชัน dc.compositeChart ถูกจับคู่กับคอนเทนเนอร์ที่มี composite เป็นรหัสของมัน

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv -

d3.csv("data/people.csv", function(errors, people) {
    
}

หากไม่มีข้อมูลแสดงว่าเกิดข้อผิดพลาด เราจะใช้ไฟล์ people.csv เดียวกัน ไฟล์ข้อมูลตัวอย่างมีดังนี้ -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.............
.............
..............

ขั้นตอนที่ 3: แมปข้อมูล

ตอนนี้แมปข้อมูลตามที่แสดงด้านล่าง -

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

ที่นี่เรากำหนดอายุจากข้อมูล Crossfilter ~~ เป็นตัวดำเนินการแบบไม่ใช้บิตคู่ ใช้แทนได้เร็วกว่า

ตอนนี้ใช้อายุมิติข้อมูลและจัดกลุ่มข้อมูลเพศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

ขั้นตอนที่ 4: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิประกอบโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

ที่นี่

ความกว้างของแผนภูมิคือ 768 และความสูง 480
ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างสเกลเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [15, 70]
เรากำหนดป้ายกำกับแกน x เป็นป้ายกำกับอายุและแกน y เป็นจำนวน
จากนั้นแสดงเส้นตารางแนวนอนให้เป็นจริง
เขียนค่าสีของแผนภูมิเส้น - สีแดงสำหรับเพศชายและสีน้ำเงินสำหรับเพศหญิง
สุดท้ายเราตั้งค่า brushOn เป็นเท็จและแสดงผลแผนภูมิ

ขั้นตอนที่ 5: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจcomposite.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
    
   <body>
      <div>
         <div id = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

         d3.csv("data/people.csv", function(errors, people) {
            var ndx = crossfilter();

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

ชุดข้อมูลคือชุดข้อมูล คุณสามารถลงจุดแผนภูมิตามข้อมูล บทนี้จะอธิบายวิธีการวาดแผนภูมิอนุกรมโดยละเอียด

วิธีแผนภูมิชุด

ก่อนที่จะดำเนินการวาดแผนภูมิอนุกรมเราควรทำความเข้าใจกับไฟล์ dc.seriesChartคลาสและวิธีการ dc.seriesChart ใช้ Mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixin ที่ใช้โดย dc.seriesChart คือ -

dc.stackMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.seriesChart มีดังนี้ -

dc.seriesChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น มีวิธีการของตัวเองในการวาดแผนภูมิอนุกรมซึ่งอธิบายไว้ด้านล่าง -

แผนภูมิ ([ฟังก์ชัน])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันแผนภูมิ

seriesAccessor ([accessor])

ใช้เพื่อรับหรือตั้งค่าฟังก์ชัน accessor สำหรับซีรี่ส์ที่แสดง

seriesSort ([sortFunction])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเพื่อจัดเรียงรายการของชุดข้อมูลโดยให้ค่าชุดข้อมูล

valueSort ([sortFunction])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเพื่อเรียงลำดับค่าของแต่ละชุด

วาดแผนภูมิชุด

ให้เราวาดแผนภูมิชุดใน DC ในตัวอย่างนี้ให้เราใช้ชุดข้อมูลที่ชื่อ people_hw.csv ไฟล์ข้อมูลตัวอย่างมีดังนี้ -

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

...............
...............

ไฟล์ตัวอย่างด้านบนประกอบด้วยระเบียนจำนวนมาก คุณสามารถดาวน์โหลดไฟล์ได้โดยคลิกที่ลิงค์ต่อไปนี้และบันทึกลงในตำแหน่ง DC ของคุณ

people_hw.csv

ตอนนี้ให้เราปฏิบัติตามขั้นตอนต่อไปนี้เพื่อวาดแผนภูมิชุดใน DC

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

var chart = dc.seriesChart('#line');

ที่นี่ฟังก์ชัน seriesChart ถูกแมปกับ id line

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people_hw.csv -

d3.csv("data/people_hw.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่าเกิดข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter เมื่อเราได้รับข้อมูลแล้วเราสามารถดึงข้อมูลได้ทีละคนและตรวจสอบเพศโดยใช้รหัสที่ระบุด้านล่าง -

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

ขั้นตอนที่ 3: สร้างมิติข้อมูลอายุ

ตอนนี้สร้างมิติสำหรับอายุดังที่แสดงด้านล่าง -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

ที่นี่เราได้กำหนดมิติข้อมูลและส่งกลับเพศและความสูง ตอนนี้จัดกลุ่มโดยใช้ไฟล์reduceCount() ฟังก์ชันซึ่งกำหนดไว้ด้านล่าง -

var hwGroup = hwDimension.group().reduceCount();

ขั้นตอนที่ 4: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิชุดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

ที่นี่

ความกว้างของแผนภูมิคือ 800 และความสูงคือ 600
ใช้เมธอด d3.scale.linear () เราระบุค่าโดเมน
การใช้ฟังก์ชัน seriesAccessor จะแสดงชุดข้อมูลสำหรับข้อมูล
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากชุดข้อมูล
คำอธิบายแผนภูมิสามารถใช้เพื่อเพิ่มความสูงและความกว้าง

ขั้นตอนที่ 5: ตัวอย่างการทำงาน

รายการรหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจline_series.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>Series chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.seriesChart('#line');

         d3.csv("data/people_hw.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

แผนภูมิกระจายเป็นแผนภาพทางคณิตศาสตร์ประเภทหนึ่ง แสดงโดยใช้พิกัดคาร์ทีเซียนเพื่อแสดงค่าสำหรับตัวแปรสองตัวสำหรับชุดข้อมูล ข้อมูลจะแสดงเป็นชุดของจุดและจุดอาจเป็นสี บทนี้จะอธิบายรายละเอียดเกี่ยวกับแผนภาพการกระจาย

วิธีการแปลงกระจาย

ก่อนที่จะดำเนินการวาดพล็อตกระจายเราควรทำความเข้าใจกับไฟล์ dc.scatterPlotคลาสและวิธีการ dc.scatterPlot ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixin ที่ใช้โดย dc.scatterPlot ได้รับด้านล่าง -

dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.scatterPlot มีดังนี้ -

dc.scatterPlot รับเมธอดทั้งหมดของ mixins ที่ระบุข้างต้น มันมีวิธีการของตัวเองในการวาดพล็อตการกระจายซึ่งอธิบายได้ดังนี้

customSymbol ([สัญลักษณ์])

วิธีนี้ใช้รับหรือตั้งค่าตัวสร้างสัญลักษณ์

emptySize ([ขนาด])

วิธีนี้ใช้เพื่อกำหนดหรือรับรัศมีสำหรับสัญลักษณ์เมื่อกลุ่มว่างเปล่า

excludedColor ([สี])

วิธีนี้ใช้เพื่อรับหรือกำหนดสีสำหรับสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

excludedOpacity ([ความทึบ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าความทึบของสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

excludedSize ([ขนาด])

ใช้เพื่อกำหนดหรือรับขนาดสำหรับสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

highlightedSize ([ขนาด])

ใช้เพื่อกำหนดหรือรับรัศมีสำหรับสัญลักษณ์ที่ไฮไลต์

สัญลักษณ์ ([ชนิด])

ใช้เพื่อรับหรือตั้งค่าประเภทสัญลักษณ์ที่ใช้สำหรับแต่ละจุด

วาดแผนภาพการกระจาย

ให้เราวาดพล็อตกระจายใน DC ในตัวอย่างนี้ให้เราใช้ชุดข้อมูลที่มีชื่อว่าhowell1.csvไฟล์. ไฟล์ข้อมูลตัวอย่างมีดังนี้ -

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

...............
...............

ไฟล์ตัวอย่างด้านบนประกอบด้วยระเบียนจำนวนมาก เราสามารถดาวน์โหลดไฟล์ได้โดยคลิกที่ลิงค์ต่อไปนี้และบันทึกลงในตำแหน่ง DC ของเรา

howell1.csv

ตอนนี้ให้เราทำตามขั้นตอนต่อไปเพื่อวาดแผนภูมิกระจายใน DC

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

var chart = dc.scatterPlot('#scatter');

ที่นี่ฟังก์ชัน scatterplot () ถูกแมปกับ id scatter

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ howell1.csv ตามที่แสดงด้านล่าง -

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ต่อมากำหนดข้อมูลให้กับ crossfilter

ขั้นตอนที่ 3: ดึงข้อมูลบันทึก

ให้เราดึงข้อมูลโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

ที่นี่เราได้ตรวจสอบเพศ

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

หลังจากกำหนดมิติข้อมูลแล้วให้จัดกลุ่มเพศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var hwGroup = hwDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนที่ความร้อนโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 800 และความสูงเป็น 600
ใช้ฟังก์ชัน d3.scale.linear () สำหรับทั้งแกน x และ y
ค่า brushOn ที่เปิดใช้งานเป็นเท็จ
จากนั้นกำหนดป้ายแกน x เป็นความสูงและป้ายแกน y เป็นน้ำหนัก
กำหนดขนาดสัญลักษณ์เป็นแปดและค่าช่องว่างภายในเป็น 10
สุดท้ายจัดกลุ่มข้อมูลและแสดงแผนภูมิ

ขั้นตอนที่ 6: ตัวอย่างการทำงาน

รายการรหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจscatter.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
   <title>Scatter plot Sample</title>
   <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
   <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

   <script src = "js/d3.js"></script>
   <script src = "js/crossfilter.js"></script>
   <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "scatter"></div>
      </div>

      <script language = "javascript">
         var chart = dc.scatterPlot('#scatter');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

แผนภูมิฟองใช้เพื่อแสดงข้อมูลสามมิติ เป็นรูปแบบของแผนภูมิกระจายซึ่งจุดข้อมูลจะถูกแทนที่ด้วยฟองอากาศ ขนาดฟองจะแสดงตามมิติข้อมูล ใช้แกนแนวนอนและแนวตั้งเป็นแกนค่า บทนี้จะอธิบายเกี่ยวกับแผนภูมิฟองโดยละเอียด

วิธีการแผนภูมิฟอง

ก่อนที่จะวาดแผนภูมิฟองเราควรทำความเข้าใจกับไฟล์ dc.bubbleChartคลาสและวิธีการ dc.bubbleChart ใช้ mixins เพื่อรับฟังก์ชั่นพื้นฐานของการวาดแผนภูมิซึ่งแสดงไว้ด้านล่าง -

dc.bubbleMixin
dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.bubbleChart มีดังนี้ -

dc.bubbleChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น นอกจากนี้ยังมีวิธีการวาดแผนภูมิฟองซึ่งอธิบายไว้ด้านล่าง -

elasticRadius ([รัศมี])

วิธีนี้ใช้เพื่อเปิดใช้รัศมีฟอง หากเราปิดการใช้งานนี้รัศมีฟองจะถูกปรับขนาดโดยอัตโนมัติ

sortBubbleSize ([sortBubbleSize])

วิธีนี้ใช้เพื่อเปิดใช้คุณลักษณะการเรียงลำดับในฟองอากาศ ฟองอากาศขนาดเล็กจะมาก่อนแล้วจึงค่อยๆเพิ่มขึ้น

วาดแผนภูมิฟอง

ให้เราวาดแผนภูมิฟองใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

var chart = dc.bubbleChart('#bubble');

ที่นี่ฟังก์ชัน bubbleChart ถูกจับคู่กับฟองรหัส

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ howell1.csv ไฟล์.

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่าเกิดข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter ที่นี่เราได้ดาวน์โหลดไฟล์ howell1.csv แล้ว ไฟล์เดียวกันจะถูกใช้ที่นี่และจะมีลักษณะคล้ายกับบล็อกโค้ดต่อไปนี้

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

....................
.....................

ขั้นตอนที่ 3: ดึงข้อมูลบันทึก

ให้เราดึงข้อมูลโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
   x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
   x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});

ที่นี่เราได้ตรวจสอบเพศและตั้งค่าความสูงและช่วงความกว้างของแกน x โดยใช้สูตรด้านบน

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

เราสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var genderDimension = mycrossfilter.dimension(function(data) {
   return [ data.gender, data.heightRange, data.weightRange ];
});

var genderGroup = genderDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิฟองโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart.width(1200)
   .height(400)
   .margins({top: 10, right: 50, bottom: 30, left: 60})
   .dimension(genderDimension)
   .group(genderGroup)
   .keyAccessor(function (p) {
      return p.key[1];
   })
   
   .valueAccessor(function (p) {
      return p.key[2];
   })
   
   .radiusValueAccessor(function (p) {
      return (Math.floor((p.value / 10)) + 1);
   })

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 1200 และความสูงเป็น 400
ต่อไปเราได้ระบุจุดขอบ
จากนั้นเราได้กำหนดมิติข้อมูลเพศและกลุ่ม
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากฟองอากาศ
คำนวณฟังก์ชันตัวเข้าถึงค่ารัศมีโดยใช้สูตร - Math.floor((p.value / 10)) + 1.

ขั้นตอนที่ 6: วาดฟองอากาศ

ตอนนี้วาดฟองอากาศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
   return p.key[0]
   + "\n"
   + "Height: " + p.key[1] + " cm\n"
   + "Weight: " + p.key[2] + " kg\n"
   + "Count: " + p.value;
});

ที่นี่

ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างสเกลเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [0,240] สำหรับแกน x
ในทำนองเดียวกันเรากำหนดค่าสเกลเชิงเส้น y และรัศมี
เราระบุค่าป้ายกำกับรัศมีขั้นต่ำเป็น 1,000 ค่าแกน x และแกน y เป็น 200 และ 100 ตามลำดับ
ต่อไปเราได้ระบุค่าขนาดสัมพัทธ์ฟองสูงสุดเป็น 0.7
แสดงเส้นตารางแนวนอนและแนวตั้งจากนั้นจับคู่กับชื่อเรื่องสำหรับคีย์ฟองและค่า

ขั้นตอนที่ 7: ตั้งค่า TickFormat

ตั้งค่ารูปแบบตั๋วสำหรับแกน x และแกน y โดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart.yAxis().tickFormat(function (s) {
   return s + " cm";
});

chart.xAxis().tickFormat(function (s) {
   return s + " kg";
});

สุดท้ายแสดงแผนภูมิโดยใช้ chart.render() วิธี.

ขั้นตอนที่ 8: ตัวอย่างการทำงาน

รายการรหัสที่สมบูรณ์จะแสดงในบล็อกรหัสต่อไปนี้ สร้างเว็บเพจbubble.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>Bubble chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "bubble"></div>
      </div>

      <script language = "javascript">
         var chart = dc.bubbleChart('#bubble');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
               x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
               x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
            });

            var genderDimension = mycrossfilter.dimension(function(data) {
               return [ data.gender, data.heightRange, data.weightRange ];
            });
            var genderGroup = genderDimension.group().reduceCount();

            chart.width(1200)
               .height(400)
               .margins({top: 10, right: 50, bottom: 30, left: 60})
               .dimension(genderDimension)
               .group(genderGroup)
               .keyAccessor(function (p) {
                  return p.key[1];
               })
               
               .valueAccessor(function (p) {
                  return p.key[2];
               })
               
               .radiusValueAccessor(function (p) {
                  return (Math.floor((p.value / 10)) + 1);
               })
               
               .x(d3.scale.linear().domain([0, 240]))
               .y(d3.scale.linear().domain([-40, 120]))
               .r(d3.scale.linear().domain([0, 20]))
               .minRadiusWithLabel(1000)
               .yAxisPadding(100)
               .xAxisPadding(200)
               .maxBubbleRelativeSize(0.07)
               .renderHorizontalGridLines(true)
               .renderVerticalGridLines(true)
               .renderLabel(true)
               .renderTitle(true)
               .title(function (p) {
                  return p.key[0]
                  + "\n"
                  + "Height: " + p.key[1] + " cm\n"
                  + "Weight: " + p.key[2] + " kg\n"
                  + "Count: " + p.value;
               });
               
            chart.yAxis().tickFormat(function (s) {
               return s + " cm";
            });
               
            chart.xAxis().tickFormat(function (s) {
               return s + " kg";
            });

            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

แผนที่ความร้อนเป็นการแสดงข้อมูลแบบกราฟิกในรูปแบบของแผนที่ซึ่งค่าข้อมูลจะแสดงเป็นสี บทนี้จะอธิบายเกี่ยวกับแผนที่ความร้อนโดยละเอียด

ก่อนที่จะดำเนินการวาดแผนที่ความร้อนเราควรทำความเข้าใจกับไฟล์ dc.heatMapคลาสและวิธีการ dc.heatMap ใช้ mixins เพื่อรับฟังก์ชั่นพื้นฐานของการวาดแผนภูมิซึ่งแสดงไว้ด้านล่าง -

dc.colorMixin
dc.marginMixin
dc.baseMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.heatMap มีดังนี้ -

dc.heatMap รับเมธอดทั้งหมดของ mixins ที่ระบุข้างต้น มีวิธีการวาดแผนที่ความร้อนของตัวเองซึ่งอธิบายไว้ด้านล่าง -

boxOnClick ([ตัวจัดการ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าตัวจัดการเมื่อมีการคลิกเซลล์แต่ละเซลล์ในแผนที่ความร้อน

cols ([cols])

วิธีนี้ใช้รับหรือตั้งค่าคีย์เพื่อสร้างคอลัมน์ของแผนที่ความร้อน

colsLabel ([ป้ายกำกับ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าป้ายชื่อคอลัมน์ซึ่งแสดงเป็นชื่อคอลัมน์ ในทำนองเดียวกันเราสามารถใช้ป้ายชื่อแถวได้เช่นกัน

แถว ([แถว])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าที่ใช้ในการสร้างแถวของแผนที่ความร้อน

xAxisOnClick ([ตัวจัดการ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าตัวจัดการเมื่อคลิกขีดคอลัมน์ในแกน x

xBorderRadius ([เส้นขอบ])

วิธีนี้ใช้เพื่อกำหนดรัศมีขอบ X หากตั้งค่าเป็น 0 คุณจะได้รูปสี่เหลี่ยมผืนผ้าเต็มรูปแบบ

วาดแผนที่ความร้อน

ให้เราวาดแผนที่ความร้อนใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

var chart = dc.heatMap('#heatmap');

ที่นี่ฟังก์ชั่นแผนที่ความร้อนถูกแมปกับ id heatmap

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ howell1.csv ไฟล์ดังรูปด้านล่าง -

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

ที่นี่เราได้ใช้ไฟล์ howell1.csv เดียวกันและมีลักษณะดังที่แสดงด้านล่าง -

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

......................
......................

ขั้นตอนที่ 3: ดึงข้อมูลบันทึก

ให้เราดึงข้อมูลโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

people.forEach(function(x) {
   x.age = Math.floor(x.age) + 1;
   x.heightRange = Math.floor(x.height / 10) + 1;
   x.weightRange = Math.floor(x.weight / 10) + 1;
   if(x.male == 1) {
      x.gender = 1;
   } else {
      x.gender = 2;
   }
});

ที่นี่เราได้ตรวจสอบเพศและกำหนดความสูงและช่วงความกว้างของแกน x โดยใช้สูตรด้านบน

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return [+data.gender, +data.heightRange];
});

var genderGroup = genderDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนที่ความร้อนโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(20 * 45 + 80)
   .height(2 * 45 + 40)
   .dimension(ageDimension)
   .group(ageGroup)
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.key[0]; })
   .colorAccessor(function(d) { return +d.value; })
   .title(function(d) {
      return "Height Range:   " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
      "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
      "Count: " + (d.value) + " count";
   })
   .calculateColorDomain()

chart.render();
});

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 20 × 45 + 80 และความสูงเป็น 2 × 45 + 40
จากนั้นเราได้กำหนดมิติข้อมูลเพศและกลุ่ม
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากแผนที่ความร้อน
เราต้องใช้ฟังก์ชัน colorAccessor () เพื่อคืนสี
สุดท้ายตั้งชื่อเรื่องและแสดงแผนภูมิ

ขั้นตอนที่ 6: ตัวอย่างการทำงาน

การเข้ารหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจheatmap.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC heat map Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "heatmap"></div>
      </div>

      <script language = "javascript">
         var chart = dc.heatMap('#heatmap');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               x.age = Math.floor(x.age) + 1;
               x.heightRange = Math.floor(x.height / 10) + 1;
               x.weightRange = Math.floor(x.weight / 10) + 1;
               if(x.male == 1) {
                  x.gender = 1;
               } else {
                  x.gender = 2;
               }
            });

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return [+data.gender, +data.heightRange];
            });

            var ageGroup = ageDimension.group().reduceCount();
            chart
               .width(20 * 45 + 80)
               .height(2 * 45 + 40)
               .dimension(ageDimension)
               .group(ageGroup)
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.key[0]; })
               .colorAccessor(function(d) { return +d.value; })
               .title(function(d) {
                  return "Height Range:   " + ((d.key[1] - 1) * 10) + " - " +
                  (d.key[1] * 10) + "cm\n" +
                  "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
                  "Count: " + (d.value) + " count";})
               .calculateColorDomain()

            chart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

จำนวนข้อมูลใช้เพื่อแสดงจำนวนระเบียนทั้งหมดในชุดข้อมูล ทำการนับสองประเภทต่อไปนี้ -

Total-count - จำนวนบันทึกทั้งหมด
Filter-count - จำนวนบันทึกที่ตรงกับตัวกรองปัจจุบัน

วิธีการนับข้อมูล

ก่อนที่จะใช้การนับข้อมูลเราควรทำความเข้าใจกับไฟล์ dc.dataCountคลาสและวิธีการ คลาส dc.dataCount ใช้ mixin เพื่อรับฟังก์ชันพื้นฐานในการแสดงจำนวนข้อมูลซึ่งก็คือ -

dc.baseMixin

dc.dataCount รับวิธีการทั้งหมดของ mixin นี้และมีวิธีการของตัวเองเพื่อแสดงจำนวนข้อมูลตามที่อธิบายด้านล่าง

formatNumber ([ฟอร์แมตเตอร์])

วิธีนี้ใช้เพื่อรับหรือตั้งค่ารูปแบบสำหรับจำนวนตัวกรองและจำนวนรวม

html ([ตัวเลือก])

ใช้รับหรือตั้งค่าเทมเพลต HTML เพื่อแสดงจำนวนรายการที่เลือก

For example -

counter.html ({
   all: 'HTML template to use if all items are selected'
})

ที่นี่ใช้ "ทั้งหมด" เพื่อเลือกรายการทั้งหมดโดยใช้% total-count หากเราต้องการใช้เฉพาะบางรายการเราสามารถใช้บางระเบียนโดยใช้ตัวเลือก% filter-count

ตัวอย่างการนับข้อมูล

ให้เราทำการนับข้อมูลใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: เพิ่มสไตล์

ให้เราเพิ่มสไตล์ใน CSS โดยใช้การเข้ารหัสที่ระบุด้านล่าง -

.dc-chart { font-size: 12px; }

ที่นี่เราได้กำหนดรูปแบบสำหรับแผนภูมิ

ขั้นตอนที่ 2: สร้างตัวแปร

ให้เราสร้างตัวแปรเป็น DC ดังรูปด้านล่าง -

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");

ที่นี่เราได้กำหนด id ตัวแปร barChart ในบรรทัดในขณะที่รหัส countChart คือ mystats

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv ที่แสดงด้านล่าง -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter

ที่นี่เรากำลังใช้ไฟล์ people.csv ซึ่งใช้ในตัวอย่างแผนภูมิก่อนหน้านี้ มีลักษณะดังที่แสดงด้านล่าง -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.........................................
........................................

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

// age dimension
var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

หลังจากกำหนดมิติข้อมูลแล้วให้จัดกลุ่มอายุโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิแท่งโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 400 และความสูงเป็น 200
ต่อไปเราได้ระบุช่วงโดเมนเป็น [15,70]
เราได้ตั้งค่าป้ายชื่อแกน x เป็นอายุและป้ายชื่อแกน y เป็นจำนวน
เราได้ระบุฟังก์ชัน elasticY และ X เป็นจริง

ขั้นตอนที่ 6: สร้างและแสดงแผนภูมิการนับ

ตอนนี้สร้างและแสดงแผนภูมิการนับโดยใช้การเข้ารหัสด้านล่าง -

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

barChart.render();
countChart.render();

ที่นี่เราได้กำหนดมิติข้อมูลให้กับตัวแปร crossfilter สุดท้ายจัดกลุ่มระเบียนทั้งหมดตามอายุ

ขั้นตอนที่ 7: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจdatacount.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC datacount sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css" />
   
      <style>
         .dc-chart { font-size: 12px; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var countChart = dc.dataCount("#mystats");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            barChart.render();
            countChart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

หน้าเริ่มต้นการนับข้อมูลแสดงอยู่ด้านล่าง

หลังจากเลือกอายุแล้วจะแสดงจำนวนตามที่แสดงในภาพหน้าจอด้านล่าง

ตารางข้อมูลใช้เพื่อแสดงระเบียนในรูปแบบตาราง จะแสดงรายการชุดข้อมูล crossfilter ตามที่อธิบายไว้ในบทนี้โดยละเอียด

วิธีการตารางข้อมูล

ก่อนที่จะดำเนินการวาดตารางข้อมูลเราควรทำความเข้าใจกับไฟล์ dc.dataTableคลาสและวิธีการ ใช้ mixin เพื่อรับฟังก์ชันพื้นฐานในการวาดแผนภูมิตารางข้อมูลซึ่งกำหนดไว้ด้านล่าง -

dc.baseMixin

dc.dataTable รับวิธีการทั้งหมดของ mixin นี้และมีวิธีการของตัวเองในการวาดตารางข้อมูลซึ่งอธิบายได้ดังนี้

beginSlice ([ชิ้น])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าดัชนีของชิ้นส่วนเริ่มต้น วิธีนี้มีประโยชน์เมื่อใช้การแบ่งหน้า

ในทำนองเดียวกันคุณสามารถใช้ฟังก์ชัน endSlice () ได้เช่นกัน

คอลัมน์ ([คอลัมน์])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันคอลัมน์ ใช้วิธีการต่อไปนี้เพื่อระบุคอลัมน์ที่จะแสดง

chart.columns([
   function(d) { return d.mark; },
   function(d) { return d.low; },
   function(d) { return d.high; },
   function(d) { return numberFormat(d.high - d.low); },
   function(d) { return d.volume; }
]);

ในที่นี้ d แทนแถวในชุดข้อมูล เราสามารถใช้ HTML เพื่อแสดงคอลัมน์ในตารางข้อมูล

กลุ่ม (groupFunction)

วิธีนี้ใช้เพื่อดำเนินการฟังก์ชันกลุ่มสำหรับตารางข้อมูล

คำสั่งซื้อ ([คำสั่งซื้อ])

ใช้เพื่อเรียงลำดับฟังก์ชันคำสั่ง หากลำดับจากน้อยไปมากมิติข้อมูล () จะใช้. ด้านล่าง () เพื่อดึงข้อมูลมิฉะนั้นจะใช้มิติข้อมูล (). top ()

ตัวอย่างตารางข้อมูล

ให้เราสร้างตารางข้อมูลใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: เพิ่มสไตล์

ให้เราเพิ่มสไตล์ใน CSS โดยใช้การเข้ารหัสที่ระบุด้านล่าง -

.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }

ที่นี่เราได้กำหนดรูปแบบสำหรับแผนภูมิกลุ่มตารางและคอลัมน์กริด

ขั้นตอนที่ 2: สร้างตัวแปร

ให้เราสร้างตัวแปรเป็น DC ดังรูปด้านล่าง -

var barChart = dc.barChart('#line'); // 
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");

ที่นี่เราได้กำหนด id ตัวแปร barChart ในบรรทัดรหัส countChart คือ mystats และ id tableChart คือ mytable

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv ที่แสดงด้านล่าง -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter ที่นี่เราได้ใช้ไฟล์ people.csv เดียวกันซึ่งใช้ในตัวอย่างแผนภูมิก่อนหน้านี้

มีลักษณะดังนี้ -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

..........................................
..........................................

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิแท่งโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 400 และความสูงเป็น 200
ต่อไปเราได้ระบุช่วงโดเมนเป็น [15,70]
เราได้ตั้งค่าป้ายชื่อแกน x เป็นอายุและป้ายชื่อแกน y เป็นจำนวน
เราได้ระบุฟังก์ชัน elasticY และ X เป็นจริง

ขั้นตอนที่ 6: สร้างตารางข้อมูล

ตอนนี้สร้างตารางข้อมูลโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

tableChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

ที่นี่เราได้ระบุมิติข้อมูลอายุและจัดกลุ่มข้อมูล

ขั้นตอนที่ 7: แสดงตาราง

ตอนนี้แสดงตารางโดยใช้การเข้ารหัสด้านล่าง -

.size(Infinity)
   .columns(['name', 'DOB'])
   .sortBy(function (d) {
      return d.value;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
tableChart.render();

ที่นี่เราได้จัดเรียงคอลัมน์โดยใช้ DOB และจัดเรียงระเบียน

ขั้นตอนที่ 8: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจ datatable.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC datatable sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
   
      <style>
         .dc-chart { font-size: 12px; }
         .dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
               class = "total-count"></span> | <a href = "javascript:dc.filterAll();
               dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div id = "mytable"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var tableChart = dc.dataTable("#mytable");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            tableChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(Infinity)
               .columns(['name', 'DOB'])
               .sortBy(function (d) {
                  return d.value;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            tableChart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และคุณจะเห็นคำตอบต่อไปนี้

หลังจากเลือกอายุระหว่าง 20 ถึง 30 ปีจะแสดงบันทึกตารางดังแสดงในภาพหน้าจอด้านล่าง -

ตารางข้อมูลใช้เพื่อกรองและแสดงระเบียน บทนี้จะอธิบายเกี่ยวกับตารางข้อมูลโดยละเอียด

วิธีการตารางข้อมูล

ก่อนที่จะดำเนินการวาดตารางข้อมูลเราควรทำความเข้าใจกับไฟล์ dc.dataGridคลาสและวิธีการ คลาสนี้ใช้ mixin เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิตารางข้อมูลซึ่งกำหนดไว้ด้านล่าง -

dc.baseMixin

dc.dataGrid ได้รับวิธีการทั้งหมดของ mixin นี้รวมทั้งมีวิธีการของตัวเองในการวาดตารางข้อมูลซึ่งจะอธิบายไว้ด้านล่าง -

beginSlice ([ชิ้น])

ในทำนองเดียวกันคุณสามารถใช้ endSlice ()

กลุ่ม (ฟังก์ชัน)

วิธีนี้ใช้เพื่อดำเนินการฟังก์ชันกลุ่มสำหรับตารางข้อมูล

html ([html])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเพื่อสร้าง html แบบไดนามิก

คำสั่งซื้อ ([คำสั่งซื้อ])

ใช้เพื่อเรียงลำดับฟังก์ชันคำสั่ง

ขนาด ([size])

ใช้เพื่อแสดงจำนวนรายการในตาราง

sortBy ([sortByFunction])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเรียงลำดับตาม เราสามารถจัดเรียงเขตข้อมูลโดยใช้ฟังก์ชันนี้ ตัวอย่างเช่นเราสามารถจัดเรียงตามอายุซึ่งกำหนดไว้ด้านล่าง -

chart.sortBy(function(d) {
   return d.age;
});

ตัวอย่างตารางข้อมูล

ให้เราดำเนินการตารางข้อมูลใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: เพิ่มสไตล์

ให้เราเพิ่มสไตล์ใน CSS โดยใช้การเข้ารหัสด้านล่าง -

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

ที่นี่เราได้กำหนดรูปแบบสำหรับแผนภูมิตารางด้านบนและตารางรายการ

ขั้นตอนที่ 2: สร้างตัวแปร

ให้เราสร้างตัวแปรใน DC ตามคำอธิบายด้านล่าง -

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

ที่นี่เราได้กำหนด id ตัวแปร barChart ในบรรทัดรหัส countChart คือ mystats และ id gridChart คือ mygrid

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv ไฟล์ดังรูปด้านล่าง -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่าเกิดข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter

ที่นี่เราใช้ไฟล์ people.csv เดียวกันซึ่งใช้ในตัวอย่างแผนภูมิก่อนหน้านี้ ดูเหมือนดังที่แสดงด้านล่าง -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

..........................................
.........................................

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิแท่งโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 400 และความสูงเป็น 200
ต่อไปเราได้ระบุช่วงโดเมนเป็น [15,70]
เราได้ตั้งค่าป้ายชื่อแกน x เป็นอายุและป้ายชื่อแกน y เป็นจำนวน
เราได้ระบุฟังก์ชัน elasticY และ X เป็นจริง

ขั้นตอนที่ 6: สร้างแผนภูมิกริด

ตอนนี้สร้างแผนภูมิกริดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

ขั้นตอนที่ 7: สร้างเส้นตาราง

ตอนนี้แสดงตารางโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

ที่นี่เราได้จัดเรียงชื่อโดยใช้ฟังก์ชัน html () และในที่สุดก็แสดงผลแผนภูมิ

ขั้นตอนที่ 8: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจdatagrid.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC datagrid sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); 
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(100)
               .htmlGroup (function(d) { 
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               .html (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            gridChart.render();
         });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

ในขั้นต้นแผนภูมิกริดจะดูเหมือนภาพหน้าจอต่อไปนี้

หากคุณเลือกอายุระหว่าง 63 ถึง 66 ปีระบบจะกรองบันทึกต่อไปนี้

Legend คือการปรับแต่งหน้าจอที่แนบมาได้ สามารถเพิ่มลงในแผนภูมิ DC อื่น ๆ เพื่อแสดงฉลากคำอธิบายแนวนอน บทนี้จะอธิบายเกี่ยวกับตำนานโดยละเอียด

วิธีตำนาน

Legend สนับสนุนวิธีการที่สำคัญดังต่อไปนี้ ให้เราดูรายละเอียดแต่ละข้อ

autoItemWidth ([กว้าง])

วิธีนี้ใช้เพื่อตั้งค่าความกว้างอัตโนมัติสำหรับเปิดหรือปิดรายการตำนาน ถ้าเป็นจริง itemWidth จะถูกละเว้น มีการกำหนดไว้ด้านล่าง -

legend.autoItemWidth = function (width) {
   if (!arguments.length) {
      return _width;
   }
}

ช่องว่าง ([ช่องว่าง])

วิธีนี้ใช้เพื่อตั้งค่าหรือรับช่องว่างระหว่างรายการตำนาน มีกำหนดดังนี้ -

legend.gap = function (gap) {
   if (!arguments.length) {
      return _gap;
   }
}

แนวนอน ([h])

วิธีนี้ใช้เพื่อวางตำแหน่งตำนานในแนวนอนและกำหนดไว้ดังนี้

_legend.horizontal = function (h) {
   if (!arguments.length) {
      return _h;
   }
};

itemHeight ([itemHeight])

วิธีนี้ใช้เพื่อตั้งค่าหรือรับความสูงของรายการคำอธิบายแผนภูมิ

legend.itemHeight = function (itemHeight) {
   if (!arguments.length) {
      return _itemHeight;
   }
};

itemWidth ([itemWidth])

วิธีนี้ใช้เพื่อตั้งค่าหรือรับตำนานความกว้างของรายการสำหรับคำอธิบายแนวนอน

_legend.itemWidth = function (itemWidth) {
   if (!arguments.length) {
      return _itemWidth;
   }
};

legendText ([ข้อความ])

วิธีนี้ใช้เพื่อตั้งค่าหรือรับฟังก์ชันข้อความคำอธิบายแผนภูมิ วิดเจ็ตคำอธิบายแผนภูมิใช้ฟังก์ชันนี้เพื่อแสดงข้อความคำอธิบายแผนภูมิสำหรับแต่ละรายการ หากไม่ได้ระบุฟังก์ชันไว้วิดเจ็ตตำนานจะแสดงชื่อที่เกี่ยวข้องกับแต่ละกลุ่ม ตัวอย่างง่ายๆแสดงไว้ด้านล่าง -

legend.legendText(dc.pluck('name'))

maxItems ([รายการ])

วิธีนี้ใช้เพื่อแสดงจำนวนรายการตำนานสูงสุด

x ([x])

ใช้เพื่อตั้งค่าหรือรับพิกัด x สำหรับวิดเจ็ตตำนานและกำหนดไว้ด้านล่าง -

legend.x = function (x) {
   if (!arguments.length) {
      return _x;
   }
};

ในทำนองเดียวกันคุณสามารถดำเนินการพิกัด y

ในบทนี้เราจะพัฒนาแดชบอร์ดใน DC โดยคลิกและเลือกแผนภูมิ

ตัวอย่างการทำงาน

ตอนนี้เรามีพื้นหลังและสามารถเริ่มเขียนโค้ดได้ ประกอบด้วยขั้นตอนต่อไปนี้ -

ขั้นตอนที่ 1: เพิ่มสไตล์

ให้เราเพิ่มสไตล์ใน CSS โดยใช้การเข้ารหัสที่ระบุด้านล่าง

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

ที่นี่เราได้กำหนดรูปแบบสำหรับแผนภูมิตารางด้านบนและตารางรายการ

ขั้นตอนที่ 2: สร้างตัวแปร

ให้เราสร้างตัวแปรเป็น DC ดังภาพด้านล่าง

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

ที่นี่เราได้กำหนด id ตัวแปร barChart ในบรรทัดรหัส countChart คือ mystats, pieChart คือ pie และ id gridChart คือ mygrid

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ people.csv ตามภาพด้านล่าง

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด ตอนนี้กำหนดข้อมูลให้กับ crossfilter ที่นี่เราได้ใช้เหมือนกันpeople.csvซึ่งเราได้ใช้ในตัวอย่างแผนภูมิก่อนหน้านี้ มีลักษณะดังที่แสดงด้านล่าง

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.........................................
.........................................

ขั้นตอนที่ 4: กำหนดมิติข้อมูลสำหรับอายุ

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสด้านล่าง

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

หลังจากกำหนดมิติข้อมูลแล้วให้จัดกลุ่มอายุโดยใช้การเข้ารหัสที่ระบุด้านล่าง

var ageGroup = ageDimension.group().reduceCount();

ขั้นตอนที่ 5: ตั้งค่ามิติข้อมูลสำหรับเพศ

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสด้านล่าง

// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

ขั้นตอนที่ 6: สร้างแผนภูมิแท่ง

ตอนนี้สร้างแผนภูมิแท่งโดยใช้การเข้ารหัสด้านล่าง

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 400 และความสูงเป็น 200
ต่อไปเราได้ระบุช่วงโดเมนเป็น [15, 70]
เราได้ตั้งค่าป้ายแกน x เป็นอายุและป้ายชื่อแกน y เป็นจำนวน
เราได้ระบุฟังก์ชัน elasticY และ X เป็นจริง

ขั้นตอนที่ 7: สร้างแผนภูมิวงกลม

ตอนนี้สร้างแผนภูมิวงกลมโดยใช้การเข้ารหัสด้านล่าง

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 200 และความสูงเป็น 100
ตอนนี้จัดกลุ่มมิติข้อมูลตามเพศ

ขั้นตอนที่ 8: สร้างตารางและนับแผนภูมิ

ตอนนี้สร้างตารางและนับแผนภูมิโดยใช้การเข้ารหัสที่ระบุด้านล่าง

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

ขั้นตอนที่ 9: แสดงเส้นตารางและนับ

ตอนนี้แสดงตารางและนับโดยใช้การเข้ารหัสด้านล่าง

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

ขั้นตอนที่ 10: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจdashboard.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC dashboard sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
               <div id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

         barChart
            .width(400)
            .height(200)
            .x(d3.scale.linear().domain([15,70]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .elasticY(true)
            .elasticX(true)
            .dimension(ageDimension)
            .group(ageGroup);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

         countChart
            .dimension(mycrossfilter)
            .group(mycrossfilter.groupAll());

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
            })
            .size(100)
            .htmlGroup (function(d) { 
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            .html (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

         barChart.render();
         pieChart.render();
         countChart.render();
         gridChart.render();
      });
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์และเราจะเห็นการตอบสนองต่อไปนี้

คุณสามารถตรวจสอบตัวเองได้โดยคลิกที่แถบแผนภูมิวงกลมและดูว่าข้อมูลเปลี่ยนแปลงอย่างไร