DC.js - Biểu đồ hình tròn

Biểu đồ hình tròn là một biểu đồ thống kê hình tròn. Nó được chia thành các lát để hiển thị một tỷ lệ số. Chương này giải thích chi tiết cách vẽ biểu đồ hình tròn bằng DC.js.

Phương pháp biểu đồ hình tròn

Trước khi chuyển sang vẽ biểu đồ hình tròn, chúng ta nên hiểu dc.pieChartlớp và các phương thức của nó. Dc.pieChart sử dụng các mixin để có được chức năng cơ bản là vẽ biểu đồ. Các mixin được sử dụng bởi dc.pieChart như sau:

baseMixin
capMixin
colorMixin

Sơ đồ lớp hoàn chỉnh của dc.pieChart như sau:

Dc.pieChart nhận tất cả các phương thức của các mixin được chỉ định ở trên cũng như có các phương pháp riêng để vẽ biểu đồ tròn một cách cụ thể. Chúng như sau:

cx ([cx])
drawPaths ([đường dẫn])
blankTitle ([title])
nhãn bên ngoài ([nhãn])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
bán kính ([bán kính])
SliceCap ([cap])

Hãy để chúng tôi thảo luận chi tiết từng điều này.

cx ([cx])

Nó được sử dụng để lấy hoặc đặt vị trí tọa độ tâm x, được định nghĩa bên dưới:

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

Tương tự, bạn có thể thực hiện vị trí tọa độ y.

drawPaths ([đường dẫn])

Phương pháp này được sử dụng để vẽ đường dẫn cho biểu đồ hình tròn và được định nghĩa dưới đây:

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

blankTitle ([title])

Phương thức này dùng để đặt tiêu đề khi không có dữ liệu. Nó được định nghĩa dưới đây -

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

nhãn bên ngoài ([nhãn])

Nó được sử dụng để định vị các nhãn lát cắt lệch khỏi mép ngoài của biểu đồ. Nó được định nghĩa dưới đây -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

Phương pháp này được sử dụng để lấy hoặc thiết lập bán kính bên trong của biểu đồ hình tròn. Nếu bán kính bên trong lớn hơn0px, thì biểu đồ hình tròn sẽ được hiển thị dưới dạng biểu đồ bánh rán. Nó được định nghĩa dưới đây -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

Phương pháp này được sử dụng để lấy hoặc đặt góc lát cắt nhỏ nhất để hiển thị nhãn. Nó được định nghĩa dưới đây -

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

bán kính ([bán kính])

Phương pháp này được sử dụng để lấy hoặc thiết lập bán kính bên ngoài. Nếu bán kính không được chỉ định, thì nó sẽ chiếm một nửa chiều rộng và chiều cao tối thiểu của biểu đồ. Nó được định nghĩa dưới đây -

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

SliceCap ([cap])

Nhận hoặc đặt số lát tối đa mà biểu đồ hình tròn sẽ tạo ra. Các lát trên cùng được xác định bởi một giá trị từ cao đến thấp. Các lát khác vượt quá giới hạn sẽ được cuộn lại thành một lát 'Khác'.

Vẽ biểu đồ hình tròn

Hãy để chúng tôi tạo biểu đồ hình tròn ở DC. Trong ví dụ về biểu đồ hình tròn này, chúng ta hãy lấy một tập dữ liệu có tênpeople.csvtập tin. Tệp dữ liệu mẫu như sau:

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

....................
....................
....................

Mẫu trên chứa nhiều bản ghi. Bạn có thể tải xuống tệp bằng cách nhấp vào liên kết sau và lưu vào vị trí DC.

people.csv

Bây giờ, chúng ta hãy tuân thủ các bước sau để vẽ biểu đồ hình tròn trong DC.

Bước 1: Bao gồm một tập lệnh

Hãy để chúng tôi thêm D3, DC và Crossfilter bằng mã sau:

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

Bước 2: Xác định một biến

Tạo một đối tượng kiểu, dc.pieChart như hình dưới đây -

var pieChart = dc.pieChart('#pie');

Ở đây, id Pie được ánh xạ với một chiếc bánh.

Bước 3: Đọc dữ liệu

Đọc dữ liệu của bạn (giả sử từ people.csv) bằng cách sử dụng d3.csv()chức năng. Nó được định nghĩa như sau:

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

Ở đây, nếu tệp dữ liệu không có sẵn ở vị trí được chỉ định, thì hàm d3.csv () trả về lỗi.

Bước 4: Xác định Bộ lọc chéo

Xác định một biến cho Crossfilter và gán dữ liệu cho Crossfilter. Nó được định nghĩa dưới đây -

var mycrossfilter = crossfilter(people);

Bước 5: Tạo thứ nguyên

Tạo thứ nguyên cho giới tính bằng cách sử dụng hàm bên dưới -

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Ở đây, Giới tính của mọi người được sử dụng cho thứ nguyên.

Bước 6: ReduceCount ()

Tạo nhóm Bộ lọc chéo bằng cách áp dụng nhóm () và hàm ReduceCount () trên thứ nguyên giới tính đã tạo ở trên - groupDimension.

var genderGroup = genderDimension.group().reduceCount();

Bước 7: Tạo Pie

Tạo bánh bằng cách sử dụng chức năng bên dưới -

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Đây,

Chiều rộng của biểu đồ hình tròn được đặt thành 800.
Chiều cao của biểu đồ hình tròn được đặt thành 300.
Kích thước của biểu đồ hình tròn được đặt thành genderDimension sử dụng phương thức thứ nguyên ().
Nhóm của biểu đồ hình tròn được đặt thành genderGroup bằng cách sử dụng phương thức group ().
Đã thêm sự kiện nhấp chuột để ghi dữ liệu bằng sự kiện tích hợp DC.js, renderlet(). Kết xuất được gọi, bất cứ khi nào biểu đồ được hiển thị hoặc vẽ.

Bước 8: Ví dụ làm việc

Tạo một tệp html mới, pie.html và bao gồm tất cả các bước trên như hình dưới đây -

<html>
   <head>
      <title>DC.js Pie 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 = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

Bây giờ, hãy yêu cầu trình duyệt và chúng tôi sẽ thấy phản hồi sau.