DC.js - baseMixin

上一頁
下一頁

baseMixin 提供建立任何型別的圖表所需的基​​本方法。它涵蓋了從設定圖表寬度到圖表的高階過濾。

通用圖表選項

basicMixin 提供了許多圖表方法來獲取/設定圖表的屬性。它們如下所示：

  • chartID() - 返回圖表的內部數字 ID。

  • chartGroup( [chartGroup]) - 獲取或設定圖表所屬的組。在 DC.js 中，圖表可以組合成一個集合。同一組中的所有圖表都應共享相同的 Crossfilter 資料集。它們同時渲染和重新繪製。

mychart.chartGroup('dashboard');

  • minWidth( [minWidth]) - 設定圖表的最小寬度。

mychart.minWidth(300);

  • width( [width]) - 獲取或設定圖表的寬度。

mychart.width(600);

  • minHeight( [minHeight]) - 獲取或設定圖表的最小高度。

mychart.minHeight(300);

  • height( [height]) - 獲取或設定圖表的的高度。

mychart.height(300);

  • title( [titleFunction]) - 獲取或設定標題函式。標題是圖表中子元素的 SVG 元素的標題（例如，條形圖中的單個條形）。圖表中的標題在瀏覽器中顯示為工具提示。

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

  • label( labelFunction[??]) - 與 title() 方法類似，但它設定標籤而不是標題。

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

  • options(opts) - 使用 JavaScript 物件設定任何圖表選項。每個鍵都表示圖表中相應的可用方法，並且匹配的方法將使用相關值呼叫。

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

這裡，width() 和 height() 方法將使用指定的值觸發。

  • legend( [legend]) - 將圖例附加到圖表。可以使用 d3.legend() 方法建立圖例。

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

  • anchor( parent[??]) - 將根 SVGElement 設定為現有圖表的根或任何有效的 D3 單個選擇器。可選地，還可以使用第二個引數設定圖表組。

  • anchorName() - 獲取圖表錨定位置的 DOM ID。

  • svg( [svgElement]) - 返回圖表的 SVGElement。

  • resetSvg() - 重置 DOM 中的 SVG 容器。

  • root( [rootElement]) - 獲取圖表的根容器。

資料選項

basicMixin 提供設定圖表資料的方法。資料設定為 Crossfilter 維度和組。此外，它提供了一個獲取底層資料集的選項。

  • dimension( [dimension]) - 設定或獲取圖表的維度。維度可以是任何有效的 Crossfilter 維度。

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

  • group( group[??]) - 設定或獲取圖表的組。組可以是任何有效的 Crossfilter 組。可以使用第二個引數為組命名，以便以後在程式碼中使用它。

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

  • data( [callback]) - 設定資料回撥，並使我們能夠獲取底層圖表的的資料集。

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

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

  • keyAccessor( [keyAccessor]) - 獲取或設定鍵訪問器函式。它用於從底層 Crossfilter 組中檢索鍵。鍵用於餅圖中的切片以及折線圖/條形圖中的 x 軸。預設的 key accessor 函式如下所示：

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

  • valueAccessor( [valueAccessor]) - 獲取或設定值訪問器函式。它用於從底層 Crossfilter 組中檢索值。值用於餅圖中的切片大小以及折線圖/條形圖中的 y 軸位置。預設的 value accessor 函式如下所示：

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

  • ordering( [orderFunction]) - 獲取或設定排序函式以對序數維度進行排序。預設情況下，圖表使用 crossfilter.quicksort.by 對元素進行排序。

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

過濾器選項

過濾是 DC.js 的亮點之一。我們可以使用 filter() 方法直接在圖表物件上應用一個或多個過濾器，並呼叫圖表的 redrawGroup() 或 dc.redrawAll() 方法以檢視圖表上的過濾效果。預設情況下，圖表物件使用 filter() 方法獲取一個或多個過濾器，將其應用於底層的 Crossfilter() 資料集，從 Crossfilter 獲取過濾後的資料，並使用過濾後的資料重新繪製圖表。DC.js 提供以下方法來處理圖表中的過濾。

Filter( [filter])

獲取或設定圖表的過濾器。如果提供的過濾器是新的，則它將新增到圖表的過濾器集合中並應用於底層資料集。如果提供的過濾器已存在於圖表的過濾器集合中，則它將刪除過濾器並在底層資料上進行相關的過濾。簡而言之，filter 方法將切換提供的過濾器。

mychart.filter(10);

要刪除所有過濾器，請使用 null 值呼叫 filter 方法。過濾器可以是以下專案之一：

  • null - 圖表將刪除之前應用的所有過濾器。

  • 單個值 - 圖表將呼叫底層 Crossfilter 的 filter 方法併發送提供的值。

  • dc.filters.RangedFilter - 它接受兩個值，低值和高值。圖表將過濾掉所有資料，除了低值和高值之間的範圍內的值。

  • dc.filters.TwoDimensionalFilter - 它接受用於熱力圖的二維值。

  • dc.filters.RangedTwoDimensionalFilter - 它類似於 dc.filters.RangedFilter，只是它僅接受散點圖中使用的二維值。

hasFilter( [filter])

檢查提供的過濾器是否在圖表中可用。

replaceFilter( [filter])

用提供的過濾器替換圖表的當前過濾器。

filters()

返回與圖表關聯的所有當前過濾器。

filterAll()

清除與圖表關聯的所有過濾器。

filterHandler( [filterHandler])

獲取或設定過濾器處理程式函式。過濾器處理程式函式由圖表使用，以使用過濾器過濾底層資料集。圖表具有預設的過濾器處理程式函式，並且可以使用此方法將其替換為自定義過濾器處理程式函式。預設的過濾器處理程式如下所示：

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

獲取或設定 has-filter 處理程式函式。此函式由圖表使用，以檢查過濾器是否在圖表的過濾器集合中可用。預設的 has-filter 處理程式如下所示：

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

獲取或設定 add-filter 處理程式函式。此函式由圖表使用，以將過濾器新增到圖表的過濾器集合中。預設的 add-filter 處理程式如下所示：

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

removeFilterHandler( [removeFilterHandler])

獲取或設定 remove-filter 處理程式函式。此函式由圖表使用，以從圖表的過濾器集合中刪除過濾器。預設的 remove-filter 如下所示：

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

獲取或設定 reset-filter 處理程式函式。此函式由圖表使用，以重置圖表的過濾器集合。預設的 reset-filter 如下所示：

function (filters) {
   return [];
}

filterPrinter( [filterPrinterFunction])

獲取或設定印表機過濾器函式。此函式由圖表使用以列印過濾器資訊。

commitHandler()

獲取或設定提交處理程式。提交處理程式的目的是非同步地將過濾後的資料傳送到伺服器。

事件選項

DC.js 定義了一組有限的事件來執行某些功能，例如過濾、縮放等。DC.js 中定義的事件列表如下所示：

  • renderlet - 在重新繪製和渲染轉換後觸發。

  • pretransition - 在轉換開始之前觸發。

  • preRender - 在圖表渲染之前觸發。

  • postRender - 在圖表完成渲染（包括所有 renderlet 的邏輯）後觸發。

  • preRedraw - 在圖表重新繪製之前觸發。

  • postRedraw - 在圖表完成重新繪製（包括所有 renderlet 的邏輯）後觸發。

  • filtered - 應用、新增或刪除過濾器後觸發。

  • zoomed - 觸發縮放後觸發。

basicMixin 提供了一個方法 on(event, listener) 來為所有上述定義的事件設定回撥函式。

  • on(event, listener) - 為特定事件設定回撥或監聽器函式。

  • onClick(datum) - 它作為每個圖表的 onClick 處理程式傳遞給 D3。預設行為是根據單擊的資料（傳遞給回撥）進行過濾並重新繪製圖表組。

渲染選項

basicMixin 提供了一系列渲染圖表的方法。它們用於繪製圖表，如下所示：

  • render() - 渲染圖表。通常，它將在繪製圖表時首次使用。

  • renderGroup() - 渲染此圖表所屬組中的所有圖表。

  • renderLabel( [renderLabel]) - 開啟/關閉標籤渲染。

  • renderTitle( [renderTitle]) - 開啟/關閉標題渲染。

  • redraw() - 重新繪製整個圖表。

  • redrawGroup() - 重新繪製此圖表所屬組中的所有圖表。

轉換選項

basicMixin 提供設定圖表轉換效果的方法，如下所示：

  • transitionDelay( [delay]) - 設定或獲取此圖表例項的動畫轉換延遲（以毫秒為單位）。

  • transitionDuration( [duration]) - 設定或獲取此圖表例項的動畫轉換持續時間（以毫秒為單位）。

  • useViewBoxResizing( [useViewBoxResizing]) - 如果設定，則根據 SVG 視區屬性調整圖表大小。

  • controlsUseVisibility( [controlsUseVisibility]) - 如果設定，則使用 visibility 屬性而不是 display 屬性來顯示/隱藏圖表重置和過濾器控制元件。

在下一章中，我們將瞭解 capMixin。

列印頁面

上一頁
下一頁
廣告