D3.js - ข้อมูลเบื้องต้นเกี่ยวกับ SVG

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

คุณสมบัติของ SVG

คุณสมบัติเด่นบางประการของ SVG มีดังนี้ -

SVG เป็นรูปแบบภาพที่ใช้เวกเตอร์และเป็นแบบข้อความ
SVG มีโครงสร้างคล้ายกับ HTML
SVG สามารถแสดงเป็นไฟล์ Document object model.
คุณสมบัติ SVG สามารถระบุเป็นแอตทริบิวต์
SVG ควรมีตำแหน่งที่แน่นอนที่สัมพันธ์กับจุดเริ่มต้น (0, 0)
SVG สามารถรวมได้ตามที่อยู่ในเอกสาร HTML

ตัวอย่างขั้นต่ำ

ให้เราสร้างภาพ SVG ขั้นต่ำและรวมไว้ในเอกสาร HTML

Step 1 - สร้างภาพ SVG และตั้งค่าความกว้างเป็น 300 พิกเซลและสูงเป็น 300 พิกเซล

<svg width = "300" height = "300">

</svg>

ที่นี่ svgแท็กเริ่มต้นรูปภาพ SVG และมีความกว้างและความสูงเป็นแอตทริบิวต์ หน่วยเริ่มต้นของรูปแบบ SVG คือpixel.

Step 2 - สร้างบรรทัดเริ่มต้นที่ (100, 100) และสิ้นสุดที่ (200, 100) และกำหนดสีแดงสำหรับเส้น

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

ที่นี่ line แท็กวาดเส้นและแอตทริบิวต์ x1, y1 หมายถึงจุดเริ่มต้นและ x2, y2หมายถึงจุดสิ้นสุด แอตทริบิวต์ style กำหนดสีและความหนาของเส้นโดยใช้stroke และ stroke-width รูปแบบ

x1 - นี่คือพิกัด x ของจุดแรก
y1 - นี่คือพิกัด y ของจุดแรก
x2 - นี่คือพิกัด x ของจุดที่สอง
y2 - นี่คือพิกัด y ของจุดที่สอง
stroke - สีของเส้น
stroke-width - ความหนาของเส้น

Step 3 - สร้างเอกสาร HTML“ svg_line.html” และรวม SVG ด้านบนดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

โปรแกรมข้างต้นจะให้ผลลัพธ์ดังต่อไปนี้

SVG โดยใช้ D3.js

ในการสร้าง SVG โดยใช้ D3.js ให้เราทำตามขั้นตอนด้านล่าง

Step 1 - สร้างคอนเทนเนอร์เพื่อเก็บภาพ SVG ตามที่ระบุด้านล่าง

<div id = "svgcontainer"></div>

Step 2- เลือกคอนเทนเนอร์ SVG โดยใช้เมธอด select () และฉีดองค์ประกอบ SVG โดยใช้เมธอด append () เพิ่มแอตทริบิวต์และสไตล์โดยใช้เมธอด attr () และ style ()

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height);

Step 3 - ในทำนองเดียวกันให้เพิ่มไฟล์ line องค์ประกอบภายใน svg องค์ประกอบดังที่แสดงด้านล่าง

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

รหัสที่สมบูรณ์มีดังนี้ -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

โค้ดด้านบนให้ผลลัพธ์ดังต่อไปนี้

องค์ประกอบสี่เหลี่ยมผืนผ้า

รูปสี่เหลี่ยมผืนผ้าแสดงด้วย <rect> tag ตามที่แสดงด้านล่าง

<rect x = "20" y = "20" width = "300" height = "300"></rect>

คุณสมบัติของสี่เหลี่ยมผืนผ้ามีดังนี้ -

x - นี่คือพิกัด x ของมุมบนซ้ายของสี่เหลี่ยมผืนผ้า
y - นี่คือพิกัด y ของมุมบนซ้ายของสี่เหลี่ยมผืนผ้า
width - หมายถึงความกว้างของสี่เหลี่ยมผืนผ้า
height - นี่แสดงถึงความสูงของสี่เหลี่ยมผืนผ้า

สี่เหลี่ยมผืนผ้าธรรมดาใน SVG ถูกกำหนดตามที่อธิบายไว้ด้านล่าง

<svg width = "300" height = "300">
   <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>

สี่เหลี่ยมผืนผ้าเดียวกันสามารถสร้างได้แบบไดนามิกตามที่อธิบายไว้ด้านล่าง

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

รหัสด้านบนจะให้ผลลัพธ์ดังต่อไปนี้

องค์ประกอบวงกลม

วงกลมแสดงโดย <circle> ตามคำอธิบายด้านล่าง

<circle cx = "200" cy = "50" r = "20"/>

คุณสมบัติของวงกลมมีดังนี้ -

cx - นี่คือพิกัด x ของจุดศูนย์กลางของวงกลม
cy - นี่คือพิกัด y ของจุดศูนย์กลางของวงกลม
r - นี่แสดงถึงรัศมีของวงกลม

วงกลมธรรมดาใน SVG มีคำอธิบายไว้ด้านล่าง

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

คุณสามารถสร้างแวดวงเดียวกันได้แบบไดนามิกตามที่อธิบายไว้ด้านล่าง

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

รหัสด้านบนจะให้ผลลัพธ์ดังต่อไปนี้

องค์ประกอบวงรี

องค์ประกอบ SVG Ellipse แสดงโดย <ellipse> ตามคำอธิบายด้านล่าง

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

คุณลักษณะของวงรีมีดังนี้ -

cx - นี่คือพิกัด x ของจุดศูนย์กลางของวงรี
cy - นี่คือพิกัด y ของจุดศูนย์กลางของวงรี
rx - นี่คือรัศมี x ของวงกลม
ry - นี่คือรัศมี y ของวงกลม

วงรีง่ายๆใน SVG มีอธิบายไว้ด้านล่าง

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

สามารถสร้างวงรีเดียวกันแบบไดนามิกดังต่อไปนี้

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

รหัสด้านบนจะให้ผลลัพธ์ดังต่อไปนี้