D3 ライブラリによって提供されるすべての API は、d3 名前空間の下にあります。 d3 ライブラリはセマンティック バージョニングを使用します。 d3.version
を使用すると、現在のバージョン情報を表示できます。
d3 (コア部分)
セレクションセット
トランジションエフェクト
-
d3.transition - アニメーショントランジションを開始します。 簡単なチュートリアル
-
transition.lay - 各要素の遷移の遅延時間を指定します (単位: ms)。
-
transition.duration - 各要素の遷移の継続時間をミリ秒単位で指定します。
-
transition.ease - トランジションバッファ関数を指定します。
-
transition.attr - 新しい属性属性値へのスムーズな移行 (開始属性値は現在の属性です)。
-
transition.attrTween - 異なる attr 属性値間のスムーズな遷移 (開始属性値は遷移関数で設定でき、遷移関数全体もカスタマイズできます)。
-
transition.style - 新しいスタイル属性値へのスムーズな移行。
-
transition.styleTween - 異なるスタイル属性値間のスムーズな移行。
-
transition.text - トランジションの開始時のテキスト コンテンツを設定します。
-
transition.tween - 属性を新しい属性値に遷移します。属性は、テキストなどの非属性または非スタイル属性にすることができます。
-
transition.select - トランジション用に現在の各要素の子要素を選択します。
-
transition.selectAll - トランジション用に現在の各要素の複数の子要素を選択します。
-
transition.filter - 遷移用のデータを通じて現在の要素内の一部の要素をフィルターで除外します。
-
transition.transition - 現在のトランジションが終了した後に新しいトランジションを開始します。
-
transition.remove - 遷移後に現在の要素を削除します。
-
transition.empty - トランジションが空の場合は true を返します。現在の要素に null 以外の要素がない場合、この遷移は空になります。
-
transition.node - トランジションの最初の要素を返します。
-
transition.size - トランジション内の現在の要素数を返します。
-
transition.each - 各要素を反復して操作を実行します。トリガータイプが指定されていない場合、操作は即時に実行されます。指定されたトリガー タイプが「開始」または「終了」の場合、操作はトランジションの開始時または終了時に実行されます。
-
transition.call - 現在の遷移を使用して関数を実行します。
-
d3.ease - カスタム遷移バッファ関数。
-
ease - バッファ関数。バッファ関数を使用すると、アニメーション効果をより自然にすることができます。たとえば、弾性オブジェクトの動きをシミュレートするために使用できます。は補間関数の特殊なケースです。
-
d3.timer - カスタム アニメーション タイミングを開始します。この関数は setTimeout に似ていますが、内部では requestAnimationFrame を使用して実装されており、より効率的です。
-
d3.timer.flush - 現在のタイマーを遅延なく直ちに実行します。スプラッシュ スクリーンの問題に対処するために使用できます。
-
d3.interpolate - 2 つのパラメーター間を補間する補間関数を生成します。差分関数のタイプは、入力引数のタイプ (数値、文字列、色など) に基づいて自動的に選択されます。
-
interpolate - 補間関数。入力パラメータは [0, 1] の間です。
-
d3.interpolateNumber - 2 つの数値の間を補間します。
-
d3.interpolateRound - 2 つの数値の間を補間し、戻り値は丸められます。
-
d3.interpolateString - 2 つの文字列の間を補間します。文字列内の数値を解析すると、対応する数値が補間されます。
-
d3.interpolateRgb - 2 つの RGB カラー間を補間します。
-
d3.interpolateHsl - 2 つの HSL カラーの間を補間します。
-
d3.interpolateLab - 2 つの L*a*b* 色の間を補間します。
-
d3.interpolateHcl - 2 つの HCL カラー間を補間します。
-
d3.interpolateArray - 2 つの配列間を補間します。 d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // [0.5, 5.5, 100]
を返します。
-
d3.interpolateObject - 2 つのオブジェクト間を補間します。 d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // {x: 0.5, y: 5.5, z: 100}
- d3.interpolateTransform - 2 つの 2D アフィン変換間を補間します。
- d3.interpolateZoom - 2 点間のパンをスムーズにスケールします。例
-
d3.interpolators - カスタム補間関数を追加します。
データ操作 (配列の操作)
-
d3.ascending - 昇順ソート関数。
-
d3.descending - 降順ソート関数。
-
d3.min - 配列内の最小値を取得します。
-
d3.max - 配列内の最大値を取得します。
-
d3.extent - 配列の範囲 (最小値と最大値) を取得します。
-
d3.sum - 配列内の数値の合計を取得します。
-
d3.mean - 配列内の数値の算術平均を取得します。
-
d3.median - 配列内の数値の中央値を取得します (0.5 分位値に相当します)。
-
d3.quantile - ソートされた配列の分位数を取得します。
-
d3.bisect - 二等分によりソートされた配列内の数値の挿入位置を取得します (d3.bisectRight と同じ)。
-
d3.bisectRight - ソートされた配列内の数値の挿入位置を取得します (等しい値は右に進みます)。
-
d3.bisectLeft - ソートされた配列内の数値の挿入位置を取得します (等しい値は左に移動します)。
-
d3.bisector - 二等分関数をカスタマイズします。
-
d3.shuffle - シャッフルし、配列内の要素をランダムに配置します。
-
d3.permute - 配列内の要素を指定された順序で並べます。
-
d3.zip - 複数の配列を 1 つの配列に結合した配列。新しい配列の i 番目の要素は、元の配列の i 番目の要素で構成される配列です。
-
d3.transpose - 行列転置、d3.zip によって実装されます。
-
d3.pairs - 隣接する要素のペアの配列を返します。 d3.pairs([1, 2, 3, 4]); // を返します [ [1, 2], [2, 3]、[3、4]].
-
d3.keys - 連想配列 (ハッシュ テーブル、json、オブジェクト オブジェクト) のキーで構成される配列を返します。
-
d3.values - 連想配列の値で構成される配列を返します。
-
d3.entries - 連想配列のキーと値のエンティティで構成される配列を返します。 d3.entries({ foo: 42 }); // [{key: "foo", value を返します。 : 42 }].
-
d3.merge - ネイティブ メソッド concat と同様に、複数の配列を 1 つに連結します。 // [1, 2] を返します。 、3].
-
d3.range - d3.range([start, ]stop[, step])
-
d3.nest - 配列を階層構造に編成するネスト オブジェクトを取得します。例: http://bl.ocks.org/phoebebright/raw/3176159/
-
nest.key - ネスト階層にレベルを追加します。
-
nest.sortKeys - 現在のネスト階層をキーで並べ替えます。
-
nest.sortValues - リーフ ネスト レベルを値で並べ替えます。
-
nest.rollup - リーフ ノードの値を変更する関数を設定します。
-
nest.map - ネスト操作を実行し、連想配列 (json) を返します。
-
nest.entries - ネスト操作を実行し、キーと値の配列を返します。nest.map が { foo: 42 } のような結果を返す場合、nest.entries は [{キー: "foo"、値: 42}].
-
d3.map - JavaScript オブジェクトをハッシュに変換し、オブジェクトのプロトタイプチェーン関数によって引き起こされるハッシュの不一致の問題をシールドします。
-
map.has - マップは、特定のキーがある場合に true を返します。
-
map.get - マップ内のキーに対応する値を返します。
-
map.set - マップ内のキーに対応する値を設定します。
-
map.remove - マップ内のキーを削除します。
-
map.keys - マップ内のすべてのキーの配列を返します。
-
map.values - マップ内のすべての値で構成される配列を返します。
-
map.entries - マップ内のすべてのエントリ (キーと値のペア) で構成される配列を [{key: "foo", value: 42 に変換された { foo: 42 } と同様に返します。 }]
-
map.forEach - マップ内の各エントリに対して関数を実行します。
-
d3.set - JavaScript 配列をセットに変換し、配列のオブジェクト プロトタイプ チェーン関数によって引き起こされるセットとの不一致の問題をシールドします。 set の値は、配列の各値を文字列に変換した結果です。セット内の値は重複排除されます。
-
set.has - セットに特定の値が含まれているかどうかを返します。
-
set.add - 値を追加します。
-
set.remove - 値を削除します。
-
set.values - セット内の値で構成される配列を返します。セット内の値は重複排除されています。
-
set.forEach - セット内の各値に対して関数を実行します。
数学
外部リソースの読み込み
-
d3.xhr - リソースを取得するために XMLHttpRequest リクエストを開始します。
-
xhr.header - リクエストヘッダーを設定します。
-
xhr.mimeType - Accept 要求ヘッダーを設定し、応答 MIME タイプをオーバーライドします。
-
xhr.response - レスポンス戻り値変換関数を設定します。 function(request) { return JSON.parse(request.responseText) }
など
-
xhr.get - GET リクエストを開始します。
-
xhr.post - POST リクエストを開始します。
-
xhr.send - 指定されたメソッドとデータを使用してリクエストを開始します。
-
xhr.abort - 現在のリクエストを中止します。
-
xhr.on - 「beforesend」、「progress」、「load」、または「error」などのリクエストのイベント リスナーを追加します。
-
d3.text - テキスト ファイルを要求します。
-
d3.json - JSON をリクエストします。
-
d3.html - HTML テキスト フラグメントを要求します。
-
d3.xml - XML テキスト フラグメントを要求します。
-
d3.csv - CSV (カンマ区切り) ファイルを要求します。
-
d3.tsv - TSV (タブ区切り値、タブ区切り値) ファイルを要求します。
文字列の書式設定
-
d3.format - 数値を指定された形式の文字列に変換します。変換された形式は非常に豊富で、非常にインテリジェントです。
-
d3.formatPrefix - 指定された値と精度を持つ [SI プレフィックス] オブジェクトを取得します。この関数を使用すると、K (千)、M (百万) などのデータの大きさを自動的に決定できます。例: var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // 1.21
-
d3.requote - 文字列を正規表現で使用できる形式にエスケープします。 d3.requote(‘$’) など // return “$”
;
-
d3.round - 特定の数値を四捨五入する小数点以下の桁数を設定します。 toFixed() に似ていますが、戻り形式は数値です。 例: d3.round(1.23); // 1 を返す; d3.round(1.25, 1); // 1.3 を返す
CSV形式(d3.csv)
カラー
ネームスペース
社内
-
d3.functor - 機能化。関数ではない変数を、変数の値のみを返す関数に変換します。関数を入力すると元の関数が返され、値を入力すると元の値のみを返す関数が返されます。
-
d3.rebind - あるオブジェクトのメソッドを別のオブジェクトにバインドします。
-
d3.dispatch - カスタム イベントを作成します。
-
dispatch.on - イベント リスナーを追加または削除します。複数のリスナーをイベントに追加できます。
-
dispatch.type - イベントをトリガーします。ここで、「type」はトリガーされるイベントの名前です。
d3.scale(スケール)
定量的
-
d3.scale.linear - 線形量的変換を作成します。 (さまざまな変換をより深く理解するには、ソース コードを参照することをお勧めします。)
-
linear - ドメイン値を受け取り、ドメイン値を返します。
-
linear.invert - 逆変換。入力ドメイン値はドメイン値を返します。
-
linear.domain - ドメインを取得または設定します。
-
linear.range - 値の範囲を取得または設定します。
-
linear.rangeRound - 範囲を設定し、結果を四捨五入します。
-
linear.interpolate - get または set 変換の補間関数 (デフォルトの線形補間関数を丸め線形補間関数 d3_interpolateRound に置き換えるなど)。
-
linear.clamp - 値の範囲を閉じるかどうかを設定します。デフォルトは閉じていません。範囲が閉じている場合、補間結果が範囲外の場合は範囲の境界値が採用されます。たとえば、値の範囲が [1, 2] の場合、内挿関数の計算結果は 3 になります。閉じられていない場合、最終結果は 3 になり、閉じられている場合、最終結果は 2 になります。
-
linear.nice - ドメインのスコープを拡張して、ドメインをより規則的にします。たとえば、[0.20147987687960267, 0.996679553296417] は [0.2, 1] になります。
-
linear.ticks - ドメインから代表的な値を取得します。通常、座標軸のスケールを選択するために使用されます。
-
linear.tickFormat - 座標軸スケールの形式変換に通常使用される形式変換関数を取得します。例: var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “%”)); / / ["-100%"、"-50%"、" 0%"、" 50%"、" 100%"]
-
linear.copy - 既存の変換から変換をコピーします。
-
d3.scale.sqrt - 平方根を取る量的変換を作成します。
-
d3.scale.pow - 指数変換を作成します。 (線形対応関数のコメントを参照してください)
-
pow - ドメイン値を入力し、ドメイン値を返します。
-
pow.invert - 逆変換。入力ドメイン値はドメイン値を返します。
-
pow.domain - ドメインを取得または設定します。
-
pow.range - 値の範囲を取得または設定します。
-
pow.rangeRound - 範囲を設定し、結果を四捨五入します。
-
pow.interpolate - 変換を取得または設定するための補間関数。
-
pow.clamp - 値の範囲を閉じるかどうかを設定します。デフォルトでは閉じません。
-
pow.nice - ドメインのスコープを拡張して、ドメインをより規則的にします。
-
pow.ticks - ドメインから代表的な値を取得します。通常、座標軸のスケールを選択するために使用されます。
-
pow.tickFormat - 座標軸スケールの形式変換に通常使用される形式変換関数を取得します。
-
pow.exponent - 指数の累乗を取得または設定します。デフォルトは 1 の累乗です。
-
pow.copy - 既存の変換から変換をコピーします。
-
d3.scale.log - 対数変換を作成します。 (線形対応関数のコメントを参照してください)
-
log - ドメイン値を入力し、ドメイン値を返します。
-
log.invert - 逆変換。入力ドメイン値はドメイン値を返します。
-
log.domain - ドメインを取得または設定します。
-
log.range - 値の範囲を取得または設定します。
-
log.rangeRound - 範囲を設定し、結果を四捨五入します。
-
log.interpolate - 変換を取得または設定するための補間関数。
-
log.clamp - 値の範囲が閉じているかどうかを設定します。デフォルトは閉じていません。
-
log.nice - ドメインのスコープを拡張して、ドメインをより規則的にします。
-
log.ticks - ドメインから代表的な値を取得します。通常、座標軸のスケールを選択するために使用されます。
-
log.tickFormat - 座標軸スケールの形式変換に通常使用される形式変換関数を取得します。
-
log.copy - 既存の変換から変換をコピーします。
-
d3.scale.quantize - 数値間隔の定義領域と複数の離散値の値範囲を使用して量子化線形変換を作成します。
-
quantize - 数値を入力し、離散値を返します。例: var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); //q(0.3) === ' a ', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c;
-
quantize.invertExtent - 離散値の範囲を返します。 // q.invertExtent(‘a’) の結果は [0, 0.3333333333333333]
-
quantize.domain - get または set 変換のドメイン。
-
quantize.range - 変換の値の範囲を取得または設定します。
-
quantize.copy - 既存の変換から変換をコピーします。
-
d3.scale.threshold - しきい値線形変換を構築します。ドメインは区切られた値の数値シーケンスであり、範囲は離散値です。 quantize との違いは、quantize で指定される値の範囲が区間であり、その区間が各離散値に対応する複数の小さな区間に分割されることです。しきい値は、各セル間の境界分離値を指定します。例: var t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); t(-1) === 'a' ; t(0) === 'b'; t(0.5) === 'c'; a'); // [未定義, 0] を返します t.invertExtent('b'); // [0, 1] を返します t.invertExtent('c'); // [1, 未定義] を返します
-
threshold - 数値を入力し、離散値を返します。
-
threshold.invertExtent - 離散値を入力し、数値を返します。
-
threshold.domain - 取得または設定変換のドメイン。
-
threshold.range - 取得または設定変換の値の範囲。
-
threshold.copy - 既存の変換から変換をコピーします。
-
d3.scale.quantile - 分位線形変換を構築します。使用方法は量子化と完全に似ていますが、分位数は中央値に基づいて区間を分離し、量子化は算術平均に基づいて区間を分離するという点が異なります。 例
-
quantile - 数値を入力し、離散値を返します。
-
quantile.invertExtent - 離散値を入力し、数値を返します。
-
quantile.domain - 取得または設定変換のドメイン。
-
quantile.range - 変換の値の範囲を取得または設定します。
-
quantile.quantiles - 分位変換の分離された値を取得します。例: var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() は [0.33333333333333326, 0.6666666666666665] を返します。
-
quantile.copy - 既存の変換から変換をコピーします。
-
d3.scale.identity - 恒等線形変換を構築します。特別な線形線形変換。この変換の定義ドメインは、d3 内の一部の軸またはブラシ モジュールでのみ使用されます。
-
identity - 恒等線形変換関数。入力値を返します。
-
identity.invert - 恒等関数と同じで、入力値を返します。
-
identity.domain - 取得または設定変換のドメイン。
-
identity.range - 取得または設定変換の値の範囲。
-
identity.ticks - ドメインから代表的な値を取得します。通常、座標軸のスケールを選択するために使用されます。
-
identity.tickFormat - 座標軸スケールの形式変換に通常使用される形式変換関数を取得します。
-
identity.copy - 既存の変換から変換をコピーします。
順序変換 (順序)
d3.svg (SVG)
形状
軸
コントロール
-
d3.svg.brush - クリックしてドラッグし、2D 領域を選択します。
-
ブラシ - ブラシをページ上の特定の領域に正式にバインドします。
-
brush.x - 水平方向のドラッグに使用されるブラシの x 変換を取得または設定します。
-
brush.y - 垂直方向のドラッグに使用されるブラシの y 変換を取得または設定します。
-
brush.extent - ブラシの選択範囲 (範囲) を取得または設定します。
-
brush.clear - ブラシの選択範囲 (範囲) を空に設定します。
-
brush.empty - ブラシの選択範囲 (範囲) が空かどうかを決定します。
-
brush.on - ブラシを取得または設定するためのイベント リスナー。ブラシスタート、ブラシ、ブラシエンドの 3 種類のイベントを監視できます。
-
brush.event - プログラムを通じてリスニング イベントをトリガーし、プログラムを通じて範囲を設定した後に使用します。
d3.time (時間)
時刻の書式設定
時間スケール
時間間隔
构图(d3.layout)
バンドル
弦图(コード)