DC.js - Bảng dữ liệu
Bảng dữ liệu được sử dụng để hiển thị các bản ghi ở định dạng bảng. Nó liệt kê các bản ghi tập dữ liệu bộ lọc chéo như được giải thích chi tiết trong chương này.
Phương pháp bảng dữ liệu
Trước khi chuyển sang vẽ bảng dữ liệu, chúng ta nên hiểu dc.dataTablelớp và các phương thức của nó. Nó sử dụng một mixin để có được chức năng cơ bản của việc vẽ biểu đồ bảng dữ liệu, được định nghĩa bên dưới:
- dc.baseMixin
Dc.dataTable nhận tất cả các phương thức của mixin này và có các phương thức riêng để vẽ bảng dữ liệu, được giải thích như sau.
beginSlice ([lát])
Phương thức này được sử dụng để lấy hoặc thiết lập chỉ mục của lát bắt đầu. Phương pháp này hữu ích khi thực hiện phân trang.
Tương tự, bạn cũng có thể thực hiện hàm endSlice ().
cột ([cột])
Phương thức này được sử dụng để lấy hoặc đặt các chức năng của cột. Nó sử dụng phương thức sau để chỉ định các cột để hiển thị.
chart.columns([
function(d) { return d.mark; },
function(d) { return d.low; },
function(d) { return d.high; },
function(d) { return numberFormat(d.high - d.low); },
function(d) { return d.volume; }
]);Ở đây, d đại diện cho một hàng trong tập dữ liệu. Chúng ta có thể sử dụng HTML để hiển thị các cột trong bảng dữ liệu.
nhóm (groupFunction)
Phương thức này được sử dụng để thực hiện chức năng nhóm cho bảng dữ liệu.
order ([order])
Nó được sử dụng để sắp xếp chức năng thứ tự. Nếu thứ tự tăng dần, thì thứ nguyên () sẽ sử dụng .bottom () để tìm nạp dữ liệu, nếu không, thứ nguyên sẽ sử dụng thứ nguyên (). Top ().
Ví dụ về bảng dữ liệu
Hãy để chúng tôi tạo một bảng dữ liệu 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: Thêm kiểu
Hãy để chúng tôi thêm các kiểu trong CSS bằng cách sử dụng mã dưới đây:
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }Ở đây, chúng tôi đã gán các kiểu cho biểu đồ, nhóm bảng và cột lưới.
Bước 2: Tạo một biến
Hãy để chúng tôi tạo một biến trong DC như hình dưới đây -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");Ở đây, chúng tôi đã gán một id biến barChart trong dòng, id countChart là mystats và id tableChart là mytable.
Bước 3: Đọc dữ liệu
Đọc dữ liệu từ tệp people.csv như được hiển thị bên dưới -
d3.csv("data/people.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. Ở đây, chúng tôi đã sử dụng cùng một tệp people.csv, tệp này đã được sử dụng trong các ví dụ biểu đồ trước đây của chúng tôi.
Nó trông giống 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 4: Đặt thứ nguyên
Bạn có thể đặt thứ nguyên bằng cách sử dụng mã dưới đây -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Sau khi thứ nguyên đã được chỉ định, hãy nhóm tuổi bằng cách sử dụng mã được cung cấp bên dưới -
var ageGroup = ageDimension.group().reduceCount();Bước 5: Tạo biểu đồ
Bây giờ, tạo một biểu đồ thanh bằng cách sử dụng mã được cung cấp bên dưới -
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);Đây,
- Chúng tôi đã chỉ định chiều rộng biểu đồ là 400 và chiều cao là 200.
- Tiếp theo, chúng tôi đã chỉ định phạm vi miền là [15,70].
- Chúng tôi đã đặt nhãn trục x làm tuổi và nhãn trục y làm số lượng.
- Chúng tôi đã chỉ định hàm co giãnY và X là đúng.
Bước 6: Tạo bảng dữ liệu
Bây giờ, hãy tạo bảng dữ liệu bằng cách sử dụng mã dưới đây:
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Ở đây, chúng tôi đã chỉ định thứ nguyên tuổi và nhóm dữ liệu.
Bước 7: Kết xuất bảng
Bây giờ, kết xuất lưới bằng cách sử dụng mã bên dưới -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();Ở đây, chúng tôi đã sắp xếp các cột bằng DOB và sắp xếp các bản ghi.
Bước 8: Ví dụ làm việc
Mã hoàn chỉnh như sau. Tạo một trang web datatable.html và thêm các thay đổi sau vào nó.
<html>
<head>
<title>DC datatable sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
<div style = "clear: both">
<div id = "mytable"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
});
</script>
</body>
</html>Bây giờ, yêu cầu trình duyệt và bạn sẽ thấy phản hồi sau.
Sau khi chọn độ tuổi từ 20 đến 30, nó sẽ hiển thị các bản ghi bảng như trong ảnh chụp màn hình bên dưới -
