DC.js - Biểu đồ đường

Biểu đồ đường được sử dụng để hiển thị thông tin dưới dạng một chuỗi các điểm dữ liệu được kết nối bằng các đường thẳng. Một điểm dữ liệu đại diện cho hai giá trị, một giá trị được vẽ dọc theo trục hoành và một giá trị khác dọc theo trục tung. Ví dụ: mức độ phổ biến của các mặt hàng thực phẩm có thể được vẽ dưới dạng biểu đồ đường theo cách mà mặt hàng thực phẩm được thể hiện dọc theo trục x và mức độ phổ biến của nó được biểu thị dọc theo trục y. Chương này giải thích chi tiết về biểu đồ đường.

Phương pháp biểu đồ đường

Trước khi chuyển sang vẽ biểu đồ đường, chúng ta nên hiểu dc.lineChartlớp và các phương thức của nó. Dc.lineChart 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.lineChart như sau:

dc.stackMixin
dc.coordinateGridMixin

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

Dc.lineChart nhận tất cả các phương thức của các mixin được chỉ định ở trên cũng như nó có các phương pháp riêng để vẽ biểu đồ đường. Chúng được giải thích như sau.

dashStyle ([style])

Phương pháp này được sử dụng để đặt kiểu dấu gạch ngang cho biểu đồ đường.

dotRadius ([bán kính])

Phương pháp này được sử dụng để lấy hoặc đặt bán kính (trong PX) cho các điểm hiển thị trên các điểm dữ liệu. Nó được định nghĩa như sau:

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

nội suy ([i])

Phương pháp này được sử dụng để lấy hoặc đặt bộ nội suy cho một dòng.

renderArea ([khu vực])

Phương thức này được sử dụng để lấy hoặc thiết lập vùng hiển thị.

renderDataPoints ([tùy chọn])

Phương pháp này được sử dụng để hiển thị các chấm riêng lẻ cho từng điểm dữ liệu.

căng thẳng ([căng thẳng])

Phương pháp này được sử dụng để lấy hoặc thiết lập lực căng cho các đường đã vẽ. Nó nằm trong khoảng từ 0 đến 1.

xyTipsOn ([xyTipsOn])

Phương pháp này được sử dụng để thay đổi hành vi chuột của một điểm dữ liệu riêng lẻ.

Vẽ biểu đồ đường

Hãy để chúng tôi vẽ một biểu đồ đường trong DC. Để thực hiện việc này, chúng ta cần làm theo các bước dưới đây:

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

Hãy để chúng tôi xác định một biến như hình dưới đây:

var chart = dc.lineChart('#line');

Ở đây, hàm dc.linechart được ánh xạ với vùng chứa có id line.

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

Đọc dữ liệu từ people.csv tập tin -

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

Ở đây, nếu chúng ta sử dụng cùng một tập dữ liệu people.csv, thì tệp dữ liệu mẫu sẽ 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

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

Bước 3: Tạo thứ nguyên độ tuổi

Bây giờ, hãy tạo thứ nguyên cho độ tuổi như hình dưới đây -

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Ở đây, chúng tôi đã gán tuổi từ dữ liệu Crossfilter.

~~ là một toán tử kép KHÔNG theo bit. Nó được sử dụng như một sự thay thế nhanh hơn choMath.floor() chức năng.

Bây giờ, hãy nhóm nó bằng cách sử dụng reduceCount() , được định nghĩa bên dưới:

var ageGroup = ageDimension.group().reduceCount();

Bước 4: Tạo biểu đồ

Bây giờ, tạo một biểu đồ đường bằng cách sử dụng mã được cung cấp bên dưới:

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();

Đây,

Chiều rộng biểu đồ là 800 và chiều cao là 300.
Hàm d3.scale.linear được sử dụng để xây dựng một tỷ lệ tuyến tính mới với phạm vi miền xác định [15, 70].
Tiếp theo, chúng tôi đặt brushOn giá trị thành sai.
Chúng tôi gán nhãn trục y là count và nhãn trục x là age.
Cuối cùng, nhóm tuổi sử dụng ageGroup.

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

Danh sách mã hoàn chỉnh được hiển thị trong khối mã sau. Tạo một trang webline.html và thêm các thay đổi sau vào nó.

<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>

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.