DC.js - baseMixin

baseMixincung cấp các phương pháp cơ bản cần thiết để tạo bất kỳ loại biểu đồ nào. Nó bao gồm từ thiết lập chiều rộng của biểu đồ đến lọc nâng cao của biểu đồ.

Tùy chọn biểu đồ chung

Các basicMixincung cấp nhiều phương pháp biểu đồ để lấy / đặt các thuộc tính của biểu đồ. Chúng như sau,

  • chartID() - Trả về ID số bên trong của biểu đồ.

  • chartGroup( [chartGroup])- Nhận hoặc thiết lập nhóm mà biểu đồ thuộc về. Trong DC.js, các biểu đồ có thể được nhóm thành một tập hợp duy nhất. Tất cả các biểu đồ trong một nhóm dự kiến ​​sẽ chia sẻ cùng một bộ dữ liệu Crossfilter. Chúng được kết xuất cũng như vẽ lại đồng thời.

mychart.chartGroup('dashboard');

  • minWidth( [minWidth]) - Đặt chiều rộng tối thiểu của biểu đồ.

mychart.minWidth(300);

  • width( [width]) - Lấy hoặc đặt chiều rộng của biểu đồ.

mychart.width(600);

  • minHeight( [minHeight]) - Lấy hoặc đặt chiều cao tối thiểu của biểu đồ.

mychart.minHeight(300);

  • height( [height]) - Nhận hoặc thiết lập chiều cao của biểu đồ.

mychart.height(300);

  • title( [titleFunction])- Nhận hoặc đặt chức năng tiêu đề. Tiêu đề là tiêu đề của Phần tử SVG của phần tử con trong biểu đồ (ví dụ: một thanh đơn trong biểu đồ thanh). Tiêu đề trong biểu đồ được thể hiện dưới dạng chú giải công cụ trong trình duyệt.

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

  • label( labelFunction[??]) - Tương tự như phương thức title (), nhưng nó đặt nhãn thay vì tiêu đề.

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

  • options(opts)- Đặt bất kỳ tùy chọn biểu đồ nào bằng cách sử dụng đối tượng JavaScript. Mỗi khóa đại diện cho phương thức tương ứng có sẵn trong biểu đồ và phương thức đã so khớp sẽ được gọi với giá trị liên quan.

mychart.options ({
   'width' : 300,
   'height' : 300
});

Tại đây, phương thức width () và height () sẽ được kích hoạt với giá trị được chỉ định.

  • legend( [legend])- Gắn chú giải vào biểu đồ. Chú giải có thể được tạo bằng cách sử dụngd3.legend() phương pháp.

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

  • anchor( parent[??])- Đặt SVGElement gốc là gốc của biểu đồ hiện có hoặc bất kỳ bộ chọn đơn D3 hợp lệ nào. Theo tùy chọn, nhóm biểu đồ cũng có thể được đặt bằng cách sử dụng đối số thứ hai.

  • anchorName() - Nhận ID DOM của vị trí cố định của biểu đồ.

  • svg( [svgElement]) - Trả về SVGElement của biểu đồ.

  • resetSvg() - Đặt lại vùng chứa SVG trong DOM.

  • root( [rootElement]) - Nhận vùng chứa gốc của biểu đồ.

Tùy chọn dữ liệu

basicMixincung cấp các phương pháp để thiết lập dữ liệu cho các biểu đồ. Dữ liệu được đặt làm thứ nguyên và nhóm Crossfilter. Ngoài ra, nó cung cấp một tùy chọn để lấy tập dữ liệu cơ bản.

  • dimension( [dimension])- Đặt hoặc lấy kích thước của biểu đồ. Thứ nguyên là bất kỳ thứ nguyên Crossfilter hợp lệ nào.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

  • group( group[??])- Đặt hoặc lấy nhóm của biểu đồ. Một nhóm là bất kỳ nhóm Crossfilter hợp lệ nào. Nhóm có thể được đặt tên bằng cách sử dụng đối số thứ hai để sử dụng nó sau này trong mã.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

  • data( [callback]) - Đặt lệnh gọi lại dữ liệu và cho phép chúng tôi lấy tập dữ liệu của biểu đồ cơ bản.

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

  • keyAccessor( [keyAccessor])- Nhận hoặc thiết lập chức năng truy cập khóa. Nó được sử dụng để lấy khóa từ nhóm Crossfilter bên dưới. Phím được sử dụng cho các lát cắt trong biểu đồ hình tròn và trục x trong biểu đồ đường / thanh. Mặc địnhkey accessor chức năng như sau:

chart.keyAccessor(function(d) { return d.key; });

  • valueAccessor( [valueAccessor])- Nhận hoặc đặt chức năng truy cập giá trị. Nó được sử dụng để lấy giá trị từ nhóm Crossfilter bên dưới. Giá trị được sử dụng cho kích thước lát cắt trong biểu đồ hình tròn và vị trí trục y trong biểu đồ đường / thanh. Mặc địnhvalue accessor chức năng như sau:

chart.valueAccessor(function(d) { return d.value; });

  • ordering( [orderFunction])- Nhận hoặc thiết lập một chức năng đặt hàng để sắp xếp kích thước thứ tự. Theo mặc định, biểu đồ sử dụngcrossfilter.quicksort.by để sắp xếp các phần tử.

_chart.ordering(dc.pluck('key'));

Tùy chọn bộ lọc

Lọc là một trong những điểm nổi bật của DC.js. Chúng ta có thể áp dụng một hoặc nhiều bộ lọc trực tiếp trên đối tượng biểu đồ bằng cách sử dụng phương thức filter () và gọi phương thức redrawGroup () hoặc dc.redrawAll () của biểu đồ để xem hiệu quả lọc trên biểu đồ. Theo mặc định, một đối tượng biểu đồ có một hoặc nhiều bộ lọc bằng cách sử dụng phương thức filter (), áp dụng nó trên tập dữ liệu Crossfilter () bên dưới, lấy dữ liệu đã lọc từ Crossfilter và vẽ lại biểu đồ bằng cách sử dụng dữ liệu đã lọc. DC.js cung cấp các phương pháp sau để xử lý lọc trong biểu đồ.

Bộ lọc ([bộ lọc])

Nhận hoặc đặt bộ lọc cho biểu đồ. Nếu bộ lọc được cung cấp là mới, thì bộ lọc đó sẽ được thêm vào bộ lọc của biểu đồ và được áp dụng trên tập dữ liệu cơ bản. Nếu bộ lọc được cung cấp đã có sẵn trong bộ sưu tập bộ lọc của biểu đồ, thì nó sẽ loại bỏ bộ lọc và thực hiện lọc có liên quan trên dữ liệu cơ bản. Nói tóm lại, phương pháp lọc sẽ chuyển đổi các bộ lọc được cung cấp.

mychart.filter(10);

Để xóa tất cả các bộ lọc, hãy gọi phương thức bộ lọc với nullgiá trị. Bộ lọc có thể là một trong các mục sau:

  • null - Biểu đồ sẽ loại bỏ tất cả các bộ lọc đã áp dụng trước đó.

  • single value - Biểu đồ sẽ gọi phương thức lọc của Crossfilter bên dưới và gửi giá trị được cung cấp.

  • dc.filters.RangedFilter- Nó chấp nhận hai giá trị, thấp và cao. Biểu đồ sẽ lọc ra tất cả dữ liệu, ngoại trừ giá trị trong phạm vi giữa giá trị thấp và giá trị cao.

  • dc.filters.TwoDimensionalFilter - Nó chấp nhận các giá trị hai chiều được sử dụng trong bản đồ nhiệt.

  • dc.filters.RangedTwoDimensionalFilter - Nó tương tự như dc.filters.RangedFilter, ngoại trừ việc nó chấp nhận một giá trị hai chiều chỉ được sử dụng trong các biểu đồ phân tán.

hasFilter ([bộ lọc])

Kiểm tra xem bộ lọc được cung cấp có khả dụng hay không trong biểu đồ.

ReplaceFilter ([bộ lọc])

Thay thế bộ lọc hiện tại của biểu đồ bằng bộ lọc được cung cấp.

bộ lọc ()

Trả về tất cả các bộ lọc hiện tại được liên kết với biểu đồ.

filterAll ()

Xóa tất cả các bộ lọc được liên kết với biểu đồ.

filterHandler ([filterHandler])

Nhận hoặc đặt một chức năng xử lý bộ lọc. Biểu đồ sử dụng chức năng xử lý bộ lọc để lọc tập dữ liệu cơ bản bằng bộ lọc. Biểu đồ có Chức năng xử lý bộ lọc mặc định và nó có thể được thay thế bằng Chức năng xử lý bộ lọc tùy chỉnh bằng phương pháp này. Trình xử lý bộ lọc mặc định như sau:

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

Nhận hoặc đặt một hàm xử lý has-filter. Chức năng này được biểu đồ sử dụng để kiểm tra xem một bộ lọc có sẵn trong bộ sưu tập bộ lọc của biểu đồ hay không. Trình xử lý has-filter mặc định như sau:

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

Nhận hoặc đặt chức năng xử lý bộ lọc bổ sung. Chức năng này được biểu đồ sử dụng để thêm bộ lọc vào bộ lọc của biểu đồ. Trình xử lý bộ lọc bổ sung mặc định như sau:

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

Nhận hoặc đặt chức năng xử lý bộ lọc loại bỏ. Hàm này được biểu đồ sử dụng để xóa bộ lọc khỏi bộ lọc của biểu đồ. Bộ lọc loại bỏ mặc định như sau:

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

resetFilterHandler ([resetFilterHandler])

Nhận hoặc đặt chức năng xử lý bộ lọc đặt lại. Chức năng này được biểu đồ sử dụng để đặt lại bộ lọc của biểu đồ. Bộ lọc đặt lại mặc định như sau:

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

Nhận hoặc đặt chức năng lọc máy in. Chức năng này được biểu đồ sử dụng để in thông tin bộ lọc.

commitHandler ()

Lấy hoặc đặt trình xử lý cam kết. Mục đích của trình xử lý cam kết là gửi dữ liệu đã lọc đến máy chủ một cách không đồng bộ.

Tùy chọn sự kiện

DC.js xác định một tập hợp giới hạn các sự kiện để thực hiện một số chức năng như Lọc, Thu phóng, v.v. Danh sách các sự kiện được xác định trong DC.js như sau:

  • renderlet - Kích hoạt sau khi quá trình chuyển đổi được vẽ lại và kết xuất.

  • pretransition - Kích hoạt trước khi quá trình chuyển đổi bắt đầu.

  • preRender - Kích hoạt trước khi kết xuất biểu đồ.

  • postRender - Kích hoạt sau khi biểu đồ kết thúc kết xuất bao gồm tất cả logic của kết xuất.

  • preRedraw - Kích hoạt trước khi vẽ lại biểu đồ.

  • postRedraw - Kích hoạt sau khi biểu đồ kết thúc quá trình vẽ lại bao gồm tất cả logic của renderlet.

  • filtered - Kích hoạt sau khi một bộ lọc được áp dụng, thêm hoặc xóa.

  • zoomed - Kích hoạt sau khi kích hoạt thu phóng.

basicMixin cung cấp một phương pháp, on(event, listener) để thiết lập hàm gọi lại cho tất cả các sự kiện đã xác định ở trên.

  • on(event, listener) - Đặt chức năng gọi lại hoặc nghe cho sự kiện cụ thể.

  • onClick(datum)- Nó được chuyển đến D3 làm trình xử lý onClick cho mỗi biểu đồ. Hành vi mặc định là lọc trên dữ liệu được nhấp (được chuyển đến lệnh gọi lại) và vẽ lại nhóm biểu đồ.

Tùy chọn kết xuất

BasicMixin cung cấp danh sách các phương pháp để hiển thị biểu đồ. Chúng được sử dụng để vẽ biểu đồ và chúng như sau:

  • render()- Kết xuất biểu đồ. Nói chung, nó sẽ được sử dụng đầu tiên, khi biểu đồ được vẽ.

  • renderGroup() - Hiển thị tất cả các biểu đồ trong nhóm như biểu đồ này.

  • renderLabel( [renderLabel]) - Bật / tắt kết xuất nhãn.

  • renderTitle( [renderTitle]) - Bật / tắt kết xuất tiêu đề.

  • redraw() - Vẽ lại toàn bộ biểu đồ.

  • redrawGroup() - Vẽ lại tất cả các biểu đồ trong nhóm như biểu đồ này.

Tùy chọn chuyển tiếp

BasicMixin cung cấp các phương pháp để thiết lập hiệu ứng chuyển tiếp của biểu đồ và chúng như sau:

  • transitionDelay( [delay]) - Đặt hoặc lấy độ trễ chuyển tiếp hoạt ảnh (tính bằng mili giây) cho trường hợp biểu đồ này.

  • transitionDuration( [duration]) - Đặt hoặc lấy thời lượng chuyển đổi hoạt ảnh (tính bằng mili giây) cho trường hợp biểu đồ này.

  • useViewBoxResizing( [useViewBoxResizing]) - Nếu được đặt, hãy thay đổi kích thước biểu đồ theo các thuộc tính hộp xem SVG.

  • controlsUseVisibility( [controlsUseVisibility]) - nếu được đặt, hãy sử dụng thuộc tính hiển thị thay vì thuộc tính hiển thị để hiển thị / ẩn điều khiển bộ lọc và đặt lại biểu đồ.

Trong chương tiếp theo, chúng ta sẽ hiểu về capMixin.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved