หัดใช้ D3.js สร้าง svg รูปวงกลม และสี่เหลี่ยม

D3.js เป็น JavaScript library ช่วยในการแปลงข้อมูลให้ดูน่าสนใจ (Data-Driven) ในรูปแบบ HTML, CSS, และ SVG

เห็นตัวอย่างบนหน้าเว็บ d3js.org แล้วน่าสนใจเลยทดลองหัดใช้ดู

01-d3-examples

 

เพื่อแสดงตัวอย่างการเรียกใช้ D3.js หรือเป็นไอเดียกับผู้สนใจในการไปศึกษาและนำไปใช้ ในที่นี้จะแสดงเฉพาะการใช้แบบง่ายๆ เพื่อสร้าง SVG รูปวงกลม (circle) และรูปสี่เหลี่ยม (rect) โดยกำหนดค่าเป็นตัวเลขเลย เช่นจุดพิกัด (x,y) รัศมี (r) ของวงกลม หรือความกว้างยาวของสี่เหลี่ยม

ดาวน์โหลดไฟล์ D3.js ล่าสุดจากหน้าเว็บไซต์ d3js.org

http://d3js.org/d3.v3.zip

เพื่อความเป็นระเบียบแนะนำให้สร้างไดเร็คทอรี d3 ขึ้นมาภายใต้ไดเร็คทอรีเว็บที่เราเขียน แล้วใช้คำสั่ง unzip แตกไฟล์ที่ดาวน์โหลดมาไว้ในไดเร็คทอรีนี้ ตัวอย่างเช่น

$ cd /var/www/html/
$ mkdir d3
$ ls -l
total 124
drwxr-xr-x. 2 user1 users   4096 Dec  8 22:26 d3
-rw-r--r--. 1 user1 users 122433 Dec  8 22:24 d3.v3.zip

$ cd d3

$ unzip ../d3.v3.zip
Archive:  ../d3.v3.zip
  inflating: LICENSE
  inflating: d3.v3.js
  inflating: d3.v3.min.js

 

เหมือนกับ jQuery ไฟล์ .js จะมีสองเวอร์ชั่นคือธรรมดา และไฟล์ min ที่มีขนาดเล็กกว่า เพราะตัดตัวอักษรที่ไม่จำเป็นออกไป แนะนำเวลาเรียกใช้หรือระบุใน <script> ให้เลือกที่เป็น .min.js

ตัวอย่างไฟล์ HTML ที่ใช้ D3.js เพื่อสร้าง SVG รูปวงกลมและรูปสี่เหลี่ยม

<!DOCTYPE html>
<html>
<head>
<script src="d3/d3.v3.min.js"></script>
</head>
<body>
<script>

// create svg
var svg =  d3.select("body").append("svg");

svg.attr("width", 500)
   .attr("height", 200);

// create circle
var circle = svg.append("circle");

circle.attr("cx", 80)
      .attr("cy", 40)
      .attr("r", 20);

// create rect
var rect = svg.append("rect");
rect.attr("x", 140)
    .attr("y", 90)
    .attr("width",  70)
    .attr("height", 30);
</script>
</body>
</html>

 

คำอธิบาย

  • เพิ่ม <svg> ภายใต้ <body> ความกว้าง 500 สูง 200
  • เพิ่มรูปวงกลม <circle> ภายใต้ <svg> กำหนดจุดศูนย์กลางที่พิกัด (80,40) รัศมี 20
  • เพิ่มรูปสี่เหลี่ยม <rect> ภายใต้ <svg> กำหนดจุดเริ่มต้นที่พิกัด (140,90) กว้าง 70 ยาว 30

ตัวอย่างผลลัพธ์ที่ได้

หมายเหตุ ถ้าคุณใช้ Firefox แนะนำให้ใช้ Inspect Element เพื่อแสดง <svg> ที่ถูกสร้างขึ้นมาด้วย D3.js

02-firefox-inspect-element-svg

 

ข้อมูลอ้างอิง

Leave a Reply