ต่อจากบล๊อคที่แล้วนะครับ
วันนี้ผมมีหัวข้อน่าสนใจดังนี้
1. การใช้ Range, Domain เป็น Map
2. เทคนิค
1. เริ่มที่ การใช้ Range, Domain
เป็นการทำ Scale อย่างนึงครับ
(รูป)
ที่มา: https://www.dashingd3js.com/d3js-scales
หลักการคือ เราจะแปลงข้อมูลจริงๆ (Domain) ไปยังข้อมูลที่เราต้องการ (Range)
และ D3js ก็มีให้เราใช้หลายชนิด มี Linear คือแปลง Domain มาเป็น Range ด้วยการเทียบบรรยัติไตรยางค์ธรรมดาเลย, มีแบบ Ordinal คือ Scale แบบตรงๆ เช่น Domain เป็น [1,2,3,4,5] และ Range เป็น [7,8,9,10,11] เวลาเราใส่ 4 ผลลัพธ์ก็จะได้ 10 เป็นต้นครับ และเจ้า Ordinal Scale นี่เอง ที่เราประยุกต์ใช้เป็น Map ได้ สบายๆ
http://www.d3noob.org/2012/12/setting-scales-domains-and-ranges-in.html
เว็บนี้ก็อธิบายเรื่อง Scale ไว้อย่างละเอียดครับ ลองไปศึกษากันได้
D3js มี Document ค่อนข้างเยอะครับ เพราะฉะนั้น ไม่ต้องเป็นห่วงเรื่องนี้เลย
2. เทคนิค
ออกตัวก่อนว่า ผมไม่ได้มีความรู้เรื่องการ Design ที่ถูกต้องเท่าไหร่
แต่ได้ทำเกี่ยวกับ D3js มา และพอจะจับทางได้ว่า ควร Design ไปทางไหน
หากใครที่มีหลักการที่ดีกว่านี้ ก็ไม่ว่ากันครับ
- จัดกลุ่มของกราฟ ด้วยอะไรก็ได้ แต่ผมชอบจัดกลุ่มด้วย Tag G แล้วก็ตั้งชื่อ เช่นผมกำลังจะวาด Legend คำอธิบายกราฟ) ผมก็สร้าง <g class="legend">....</g> ครอบเอาไว้ เพื่อความเป็นหมวดหมู่
และจัด CSS ง่ายด้วย
- การจัดตำแหน่ง ในบางครั้งเราจำเป็นต้องจัดตำแหน่งให้วัตถุ A อยู่ใต้ข้อความ B แต่เนื่องจาก เราไม่สามารถรู้ความสูงของข้อความ B ได้จาก Font Size ธรรมดา
วิธีการของผมก็คือ ให้วาด Font B ก่อน แล้วหลังจากนั้น การจัดวัตถุ A ก็จะง่ายขึ้น
เพราะว่า เราสามารถหาความสูง ความกว้าง ของสิ่งใดๆ ใน SVG ได้หมดครับ
- ตรวจสอบข้อมูล ควรจะตรวจสอบด้วยครับ เช่นผมเคยเจอเหตุการณ์นี้ ต้องการวาดกราฟเส้น โดยคาดหวังว่า ข้อมูลจะส่งมา 5 จุด แต่จริงๆ ข้อมูลส่งมา 3 จุด (คือจุดแรก จุดที่สอง และจุดสุดท้าย)
กราฟของผมวาดได้ครับ ทั้งๆที่ ข้อมูลของจุดที่ สาม สี่ หายไป
เพราะว่าการวาดกราฟเส้น เราต้องเอาจุดต่อจุดอยู่แล้ว
ทำให้การอ่านกราฟ ผิดไปเลย กรณีนี้ต้องระวังครับ
- การจัดความกว้าง ความยาวของพื้นที่กราฟ ผมแนะนำจัดแบบสัดส่วน
คือสมมติว่าเราออกแบบว่า
มี Title อยู่ด้านบน จัดกลาง
มี Line Graph อยู่ถัดลงมา ชิดซ้าย
มี Legend อยู่ ชิดขวา แต่อยู่ตำแหน่งในแนวแกน Y เดียวกับ Line Graph
Title เราควรกำหนดให้ Width = 100%
Line Graph กำหนด Width = 70%
Legend กำหนด Width = 30%
แบบนี้เป็นต้นครับ
เราไม่ควรกำหนดเป็น Pixel มิเช่นนั้นการขยายกราฟ หรือย่อกราฟ ในภายหลัง จะปวดหัวมาก
เพราะเราต้องไปไล่แก้ความกว้างของทุกอย่างในกราฟ
จบแล้วครับ
หวังว่า คงพอจะเห็นภาพเบื้องต้น เกี่ยวกับ D3js
