DC.js - Biểu đồ chuỗi

Một chuỗi là một tập hợp dữ liệu. Bạn có thể vẽ biểu đồ dựa trên dữ liệu. Chương này giải thích cách vẽ biểu đồ chuỗi một cách chi tiết.

Phương pháp biểu đồ chuỗi

Trước khi chuyển sang vẽ biểu đồ chuỗi, chúng ta nên hiểu dc.seriesChartlớp và các phương thức của nó. Dc.seriesChart sử dụng Mixins để có được chức năng cơ bản là vẽ biểu đồ. Mixin được sử dụng bởi dc.seriesChart là:

dc.stackMixin

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

Dc.seriesChart nhận tất cả các phương thức của các mixin được chỉ định ở trên. Nó có các phương pháp riêng để vẽ biểu đồ chuỗi, được giải thích bên dưới:

biểu đồ ([hàm])

Phương pháp này được sử dụng để lấy hoặc thiết lập hàm biểu đồ.

seriesAccessor ([người truy cập])

Nó được sử dụng để lấy hoặc thiết lập chức năng truy cập cho chuỗi được hiển thị.

seriesSort ([sortFunction])

Phương thức này được sử dụng để lấy hoặc đặt một hàm để sắp xếp danh sách các chuỗi bằng cách đưa ra các giá trị của chuỗi.

valueSort ([sortFunction])

Phương thức này được sử dụng để lấy hoặc đặt một hàm để sắp xếp các giá trị của mỗi chuỗi.

Vẽ biểu đồ chuỗi

Hãy để chúng tôi vẽ một biểu đồ chuỗi trong DC. Trong ví dụ này, chúng ta hãy lấy một tập dữ liệu có tên là people_hw.csv. Tệp dữ liệu mẫu như sau:

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

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

Tệp mẫu trên gồm 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 nó vào vị trí DC của bạn.

people_hw.csv

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

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

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

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

Ở đây, hàm seriesChart được ánh xạ với dòng id.

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

Đọc dữ liệu từ tệp people_hw.csv -

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

Nếu dữ liệu không có, thì nó sẽ trả về một lỗi. Bây giờ, gán dữ liệu cho một bộ lọc chéo. Sau khi nhận được dữ liệu, chúng tôi có thể truy xuất từng dữ liệu một và kiểm tra giới tính bằng cách sử dụng mã được cung cấp bên dưới -

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

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 hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

Ở đây, chúng tôi đã chỉ định thứ nguyên và nó trả về giới tính và chiều cao. Bây giờ, hãy nhóm nó bằng cách sử dụngreduceCount() , được định nghĩa dưới đây:

var hwGroup = hwDimension.group().reduceCount();

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

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

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

Đây,

Chiều rộng biểu đồ là 800 và chiều cao là 600.
Sử dụng phương thức d3.scale.linear (), chúng tôi chỉ định giá trị miền.
Sử dụng hàm seriesAccessor, nó hiển thị chuỗi cho dữ liệu.
Trình truy cập khóa và giá trị trả về khóa và giá trị từ chuỗi.
Chú giải có thể được sử dụng để thêm chiều cao và chiều rộng.

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

Danh sách mã hoàn chỉnh như sau. Tạo một trang webline_series.html và thêm các thay đổi sau vào đó.

<html>
   <head>
      <title>Series chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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.seriesChart('#line');

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

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            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.