DC.js - แผนภูมิเส้น

แผนภูมิเส้นใช้เพื่อแสดงข้อมูลเป็นชุดของจุดข้อมูลที่เชื่อมต่อกันด้วยเส้นตรง จุดข้อมูลแสดงถึงสองค่าโดยหนึ่งพล็อตตามแกนแนวนอนและอีกจุดหนึ่งตามแกนแนวตั้ง ตัวอย่างเช่นความนิยมของรายการอาหารสามารถวาดเป็นแผนภูมิเส้นในลักษณะที่รายการอาหารแสดงตามแกน 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>

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