D3.js - แผนภูมิการวาด

D3.js ใช้เพื่อสร้างแผนภูมิ SVG แบบคงที่ ช่วยในการวาดแผนภูมิต่อไปนี้ -

แผนภูมิแท่ง
แผนภูมิวงกลม
แผนภูมิวงกลม
แผนภูมิโดนัท
แผนภูมิเส้น
แผนภูมิฟอง ฯลฯ

บทนี้อธิบายเกี่ยวกับการวาดแผนภูมิใน D3 ให้เราเข้าใจโดยละเอียดแต่ละข้อ

แผนภูมิแท่ง

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

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

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

ให้เราสร้างแผนภูมิแท่งใน SVG โดยใช้ D3 สำหรับตัวอย่างนี้เราสามารถใช้ไฟล์rect elements สำหรับบาร์และ text elements เพื่อแสดงค่าข้อมูลของเราที่สอดคล้องกับแถบ

ในการสร้างแผนภูมิแท่งใน SVG โดยใช้ D3 ให้เราทำตามขั้นตอนด้านล่าง

Step 1 - Adding style in the rect element - ให้เราเพิ่มสไตล์ต่อไปนี้ให้กับองค์ประกอบ rect

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- เพิ่มคลาส CSS ต่อไปนี้เพื่อใช้สไตล์กับค่าข้อความ เพิ่มลักษณะนี้ในองค์ประกอบข้อความ SVG มีการกำหนดไว้ด้านล่าง -

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

ที่นี่ Fill ใช้เพื่อใช้สี Text-anchor ใช้เพื่อวางตำแหน่งข้อความไปทางด้านขวาสุดของแถบ

Step 3 - Define variables- ให้เราเพิ่มตัวแปรในสคริปต์ มีคำอธิบายด้านล่าง

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

ที่นี่

Width - ความกว้างของ SVG
Scalefactor - ปรับขนาดเป็นค่าพิกเซลที่มองเห็นได้บนหน้าจอ
Barheight - นี่คือความสูงคงที่ของแถบแนวนอน

Step 4 - Append SVG elements - ให้เราต่อท้ายองค์ประกอบ SVG ใน D3 โดยใช้รหัสต่อไปนี้

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

ที่นี่เราจะเลือกเนื้อหาของเอกสารก่อนสร้างองค์ประกอบ SVG ใหม่จากนั้นต่อท้าย เราจะสร้างกราฟแท่งของเราภายในองค์ประกอบ SVG นี้ จากนั้นตั้งค่าความกว้างและความสูงของ SVG ความสูงคำนวณเป็นความสูงของแถบ * จำนวนค่าข้อมูล

เราใช้ความสูงของแท่งเป็น 30 และความยาวของอาร์เรย์ข้อมูลคือ 4 จากนั้นความสูง SVG จะถูกคำนวณเป็นความยาวคลื่น * ความยาวของข้อมูลซึ่งเท่ากับ 120 px

Step 5 - Apply transformation - ให้เราใช้การเปลี่ยนแปลงในแถบโดยใช้รหัสต่อไปนี้

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

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

Step 6 - Append rect elements to the bar- ในขั้นตอนก่อนหน้านี้เราได้เพิ่มองค์ประกอบของกลุ่ม ตอนนี้เพิ่มองค์ประกอบ rect ลงในแถบโดยใช้รหัสต่อไปนี้

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

ที่นี่ความกว้างคือ (ค่าข้อมูล * ตัวคูณมาตราส่วน) และความสูงคือ (ความสูงของแถบ - ระยะขอบ)

Step 7 - Display data- นี่คือขั้นตอนสุดท้าย ให้เราแสดงข้อมูลในแต่ละแถบโดยใช้รหัสต่อไปนี้

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

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

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

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

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

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

แผนภูมิวงกลมเป็นกราฟิกเชิงสถิติแบบวงกลมซึ่งแบ่งออกเป็นชิ้น ๆ เพื่อแสดงสัดส่วนที่เป็นตัวเลข

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

ให้เราสร้างแผนภูมิวงกลมใน SVG โดยใช้ D3 ในการดำเนินการนี้เราต้องปฏิบัติตามขั้นตอนต่อไปนี้ -

Step 1 - Define variables- ให้เราเพิ่มตัวแปรในสคริปต์ จะแสดงในบล็อกโค้ดด้านล่าง

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

ที่นี่

Width - ความกว้างของ SVG
Height - ความสูงของ SVG
Data - อาร์เรย์ขององค์ประกอบข้อมูล
Colors - ใช้สีกับองค์ประกอบวงกลม

Step 2 - Append SVG elements - ให้เราต่อท้ายองค์ประกอบ SVG ใน D3 โดยใช้รหัสต่อไปนี้

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - ให้เราใช้การเปลี่ยนแปลงใน SVG โดยใช้รหัสต่อไปนี้

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

ที่นี่

var g = svg.selectAll(“g”) - สร้างองค์ประกอบกลุ่มเพื่อเก็บวงกลม

.data(data) - ผูกอาร์เรย์ข้อมูลของเราเข้ากับองค์ประกอบกลุ่ม

.enter() - สร้างตัวยึดตำแหน่งสำหรับองค์ประกอบกลุ่มของเรา

.append(“g”) - ต่อท้ายองค์ประกอบของกลุ่มในหน้าของเรา

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

ที่นี่การแปลใช้เพื่อวางตำแหน่งองค์ประกอบของคุณตามที่มา

Step 4 - Append circle elements - ตอนนี้ต่อท้ายองค์ประกอบวงกลมเข้ากับกลุ่มโดยใช้รหัสต่อไปนี้

g.append("circle")

ตอนนี้เพิ่มแอตทริบิวต์ในกลุ่มโดยใช้รหัสต่อไปนี้

.attr("cx", function(d, i) {
   return i*75 + 50;
})

ที่นี่เราใช้พิกัด x ของจุดศูนย์กลางของแต่ละวงกลม เรากำลังคูณดัชนีของวงกลมด้วย 75 และเพิ่มช่องว่าง 50 ระหว่างวงกลม

ต่อไปเราตั้งค่าพิกัด y ของศูนย์กลางของแต่ละวงกลม สิ่งนี้ใช้เพื่อทำให้วงกลมทั้งหมดเหมือนกันและมีการกำหนดไว้ด้านล่าง

.attr("cy", function(d, i) {
   return 75;
})

จากนั้นกำหนดรัศมีของแต่ละวงกลม มีการกำหนดไว้ด้านล่าง

.attr("r", function(d) {
   return d*1.5;
})

ที่นี่รัศมีจะคูณด้วยค่าข้อมูลพร้อมกับค่าคงที่“ 1.5” เพื่อเพิ่มขนาดของวงกลม สุดท้ายเติมสีสำหรับแต่ละวงกลมโดยใช้รหัสต่อไปนี้

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- นี่คือขั้นตอนสุดท้าย ให้เราแสดงข้อมูลในแต่ละแวดวงโดยใช้รหัสต่อไปนี้

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

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

circlecharts.html

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

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

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

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

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

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

ก่อนที่จะเริ่มวาดแผนภูมิวงกลมเราต้องเข้าใจสองวิธีต่อไปนี้ -

d3.arc () วิธีการและ
d3.pie () วิธีการ

ให้เราเข้าใจทั้งสองวิธีนี้โดยละเอียด

The d3.arc() Method- วิธี d3.arc () สร้างส่วนโค้ง คุณต้องกำหนดรัศมีภายในและรัศมีภายนอกสำหรับส่วนโค้ง หากรัศมีภายในเป็น 0 ผลลัพธ์จะเป็นแผนภูมิวงกลมมิฉะนั้นผลลัพธ์จะเป็นแผนภูมิโดนัทซึ่งจะกล่าวถึงในหัวข้อถัดไป

The d3.pie()Method- วิธี d3.pie () ใช้ในการสร้างแผนภูมิวงกลม ใช้ข้อมูลจากชุดข้อมูลและคำนวณมุมเริ่มต้นและมุมสิ้นสุดสำหรับแต่ละลิ่มของแผนภูมิวงกลม

ให้เราวาดแผนภูมิวงกลมโดยใช้ขั้นตอนต่อไปนี้

Step 1 - Applying styles - ให้เราใช้สไตล์ต่อไปนี้กับองค์ประกอบส่วนโค้ง

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

ที่นี่เติมใช้เพื่อใช้สี จุดยึดข้อความใช้เพื่อวางตำแหน่งข้อความให้ตรงกลางส่วนโค้ง

Step 2 - Define variables - กำหนดตัวแปรในสคริปต์ดังที่แสดงด้านล่าง

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

ที่นี่

Width - ความกว้างของ SVG
Height - ความสูงของ SVG
Radius - สามารถคำนวณได้โดยใช้ฟังก์ชันของ Math.min (ความกว้างความสูง) / 2;

Step 3 - Apply Transformation - ใช้การเปลี่ยนแปลงต่อไปนี้ใน SVG โดยใช้รหัสต่อไปนี้

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

ตอนนี้เพิ่มสีโดยใช้ d3.scaleOrdinal ฟังก์ชันตามที่ระบุด้านล่าง

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - ตอนนี้สร้างแผนภูมิวงกลมโดยใช้ฟังก์ชันที่ระบุด้านล่าง

var pie = d3.pie()
   .value(function(d) { return d.percent; });

ที่นี่คุณสามารถพล็อตค่าเปอร์เซ็นต์ จำเป็นต้องใช้ฟังก์ชันนิรนามเพื่อส่งคืนd.percent และตั้งเป็นค่าพาย

Step 5 - Define arcs for pie wedges - หลังจากสร้างแผนภูมิวงกลมแล้วให้กำหนดส่วนโค้งสำหรับแต่ละเวดจ์ของวงกลมโดยใช้ฟังก์ชันที่ระบุด้านล่าง

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

ที่นี่ส่วนโค้งนี้จะถูกตั้งค่าเป็นองค์ประกอบเส้นทาง รัศมีที่คำนวณได้ถูกตั้งค่าเป็นรัศมีภายนอกในขณะที่รัศมีภายในถูกตั้งค่าเป็น 0

Step 6 - Add labels in wedges- เพิ่มป้ายกำกับในเวดจ์พายโดยระบุรัศมี มีกำหนดดังนี้

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- นี่เป็นขั้นตอนที่สำคัญ เราสามารถอ่านข้อมูลโดยใช้ฟังก์ชันที่ระบุด้านล่าง

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

ที่นี่ populations.csvมีไฟล์ข้อมูล d3.csvฟังก์ชันอ่านข้อมูลจากชุดข้อมูล หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด เราสามารถรวมไฟล์นี้ไว้ในเส้นทาง D3 ของคุณ

Step 8 - Load data - ขั้นตอนต่อไปคือการโหลดข้อมูลโดยใช้รหัสต่อไปนี้

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

ที่นี่เราสามารถกำหนดข้อมูลเพื่อจัดกลุ่มองค์ประกอบสำหรับแต่ละค่าข้อมูลจากชุดข้อมูล

Step 9 - Append path - ตอนนี้ต่อท้ายเส้นทางและกำหนดคลาส 'arc' ให้กับกลุ่มตามที่แสดงด้านล่าง

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

ที่นี่การเติมใช้เพื่อใช้สีข้อมูล มันถูกนำมาจากd3.scaleOrdinal ฟังก์ชัน

Step 10 - Append text - เพื่อแสดงข้อความในป้ายกำกับโดยใช้รหัสต่อไปนี้

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

ที่นี่องค์ประกอบข้อความ SVG ใช้เพื่อแสดงข้อความในป้ายกำกับ ป้ายกำกับที่เราสร้างขึ้นก่อนหน้านี้โดยใช้d3.arc()ส่งคืนจุดเซนทรอยด์ซึ่งเป็นตำแหน่งสำหรับป้ายกำกับ สุดท้ายเราให้ข้อมูลโดยใช้ไฟล์d.data.browser.

Step 11 - Append group elements - ต่อท้ายแอตทริบิวต์องค์ประกอบของกลุ่มและเพิ่มชื่อคลาสเพื่อระบายสีข้อความและทำให้เป็นตัวเอียงซึ่งระบุไว้ในขั้นตอนที่ 1 และกำหนดไว้ด้านล่าง

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- ในการวาดแผนภูมิวงกลมเราสามารถใช้ชุดข้อมูลของประชากรอินเดียได้ ชุดข้อมูลนี้แสดงจำนวนประชากรในเว็บไซต์จำลองซึ่งกำหนดไว้ดังนี้

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

ให้เราสร้างการแสดงภาพแผนภูมิวงกลมสำหรับชุดข้อมูลข้างต้น สร้างหน้าเว็บ“ piechart.html” และเพิ่มรหัสต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>