DC.js-baseMixin

baseMixinあらゆるタイプのチャートを作成するために必要な基本的な方法を提供します。チャートの幅の設定からチャートの高度なフィルタリングまで多岐にわたります。

一般的なチャートオプション

ザ・ basicMixinチャートのプロパティを取得/設定するための多くのチャートメソッドを提供します。それらは次のとおりです、

• chartID() −チャートの内部数値IDを返します。

• chartGroup( [chartGroup])−チャートが属するグループを取得または設定します。DC.jsでは、チャートを1つのセットにグループ化できます。グループ内のすべてのグラフは、同じクロスフィルターデータセットを共有することが期待されています。それらはレンダリングされると同時に再描画されます。

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])−タイトル関数を取得または設定します。Titleは、チャート内の子要素の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シングルセレクターのいずれかに設定します。オプションで、チャートグループは2番目の引数を使用して設定することもできます。

• anchorName() −チャートのアンカー位置のDOMIDを取得します。

• svg( [svgElement]) −チャートのSVGElementを返します。

• resetSvg() −DOMのSVGコンテナをリセットします。

• root( [rootElement]) −チャートのルートコンテナを取得します。

データオプション

basicMixinチャートのデータを設定する方法を提供します。データは、クロスフィルターのディメンションとグループとして設定されます。さらに、基になるデータセットを取得するオプションを提供します。

• dimension( [dimension])−チャートの寸法を設定または取得します。ディメンションは、有効なクロスフィルターディメンションです。

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

• group( group[??])−チャートのグループを設定または取得します。グループは、任意の有効なクロスフィルターグループです。2番目の引数を使用してグループに名前を付け、コードの後半で使用できます。

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])−キーアクセサ機能を取得または設定します。基になるクロスフィルターグループからキーを取得するために使用されます。キーは、円グラフのスライスと折れ線/棒グラフのx軸に使用されます。デフォルトkey accessor 機能は以下の通りです−

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

• valueAccessor( [valueAccessor])−値アクセサ関数を取得または設定します。基になるクロスフィルターグループから値を取得するために使用されます。この値は、円グラフのスライスサイズと、折れ線グラフのy軸の位置に使用されます。デフォルトvalue accessor 機能は以下の通りです−

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

• ordering( [orderFunction])−順序次元を順序付ける順序関数を取得または設定します。デフォルトでは、チャートはcrossfilter.quicksort.by 要素を並べ替えます。

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

フィルタオプション

フィルタリングは、DC.jsのハイライトの1つです。filter（）メソッドを使用して1つ以上のフィルターをチャートオブジェクトに直接適用し、チャートのredrawGroup（）またはdc.redrawAll（）メソッドを呼び出して、チャートのフィルター効果を確認できます。デフォルトでは、チャートオブジェクトはfilter（）メソッドを使用して1つ以上のフィルターを取得し、それを基になるCrossfilter（）データセットに適用し、Crossfilterからフィルターされたデータを取得し、フィルターされたデータを使用してチャートを再描画します。DC.jsは、チャートのフィルタリングを処理するために次のメソッドを提供します。

Filter（[filter]）

チャートのフィルターを取得または設定します。提供されたフィルターが新しい場合、それはチャートのフィルターコレクションに追加され、基になるデータセットに適用されます。提供されたフィルターがチャートのフィルターコレクションですでに使用可能である場合、フィルターが削除され、基になるデータに対して関連するフィルター処理が実行されます。要するに、filterメソッドは提供されたフィルターを切り替えます。

mychart.filter(10);

すべてのフィルターを削除するには、でfilterメソッドを呼び出します。 null値。フィルタは、次の項目のいずれかです。

• null −チャートは、以前に適用されたすべてのフィルターを削除します。

• single value −チャートは、基礎となるCrossfilterのfilterメソッドを呼び出し、指定された値を送信します。

• dc.filters.RangedFilter−低と高の2つの値を受け入れます。グラフは、低い値と高い値の間の範囲の値を除いて、すべてのデータを除外します。

• dc.filters.TwoDimensionalFilter −ヒートマップで使用される2次元値を受け入れます。

• dc.filters.RangedTwoDimensionalFilter − dc.filters.RangedFilterに似ていますが、散布図でのみ使用される2次元値を受け入れる点が異なります。

hasFilter（[フィルター]）

付属のフィルターがチャートで使用可能かどうかを確認します。

replaceFilter（[フィルター]）

チャートの現在のフィルターを付属のフィルターに置き換えます。

フィルタ（）

チャートに関連付けられている現在のすべてのフィルターを返します。

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

リセットフィルターハンドラー関数を取得または設定します。この関数は、チャートのフィルターコレクションをリセットするためにチャートによって使用されます。デフォルトのリセットフィルターは次のとおりです-

function (filters) {
   return [];
}

filterPrinter（[filterPrinterFunction]）

プリンターフィルター関数を取得または設定します。この関数は、チャートがフィルター情報を印刷するために使用します。

commitHandler（）

コミットハンドラーを取得または設定します。コミットハンドラーの目的は、フィルター処理されたデータをサーバーに非同期で送信することです。

イベントオプション

DC.jsは、フィルタリング、ズームなどのいくつかの機能を実行するための限定されたイベントのセットを定義します。DC.jsで定義されたイベントのリストは次のとおりです。

• renderlet −トランジションが再描画およびレンダリングされた後に発生します。

• pretransition −遷移が始まる前に発生します。

• preRender −チャートレンダリングの前に発生します。

• postRender −すべてのレンダーレットのロジックを含むチャートのレンダリングが終了した後に発生します。

• preRedraw −チャートを再描画する前に発生します。

• postRedraw −すべてのレンダーレットのロジックを含むチャートの再描画が完了した後に発生します。

• 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]) −設定されている場合、表示属性の代わりに可視性属性を使用して、チャートのリセットとフィルターコントロールを表示/非表示にします。

次の章では、capMixinについて理解します。