D3.js v4/v5 折れ線グラフ/散布図補完 種類一覧


D3の折れ線グラフの種類を紹介します。基本的な折れ線グラフの作り方の詳細はこちらに記載しています。
基本の折れ線グラフを表示するプログラムは下記です。

基本の折れ線グラフ

デフォルトでは、設定したデータ点を直線で結ぶように折れ線グラフが作成されます。黄色でハイライトした”path”要素の”d”属性を設定する

d3.lineメソッドの部分をcurveメソッドを使って変更することでラインの形を変更することができます。

curveメソッドに設定できる関数は複数用意されており、以下にまとめます。

データ区間補間

線形補間 d3.curveLinear

d3.curveLinear

データ点間を線形補間します。デフォルトと同じです。基本プログラムのハイライト部分を次のように変更して設定します。

使い方は、以下の関数すべて同じです。

スプライン補間 d3.curveBasis

d3.curveBasis

データ点間をスプライン補間します。ラインの開始点と終点はデータ点と一致します。

カーディナルスプライン補間 d3.curveCardinal

d3.curveCardinal

この関数はd3.curveCardinal.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。0の場合、デフォルトのd3.curveCatmullRomと一致し、1の場合、d3.curveLinearと一致します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRom

d3.curveCatmullRom

この関数はd3.curveCatmullRom.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。

nutural カーブスプライン補間 d3.curveNatural

d3.curveNatural

3次スプライン補間(x方向) d3.curveMonotoneX

d3.curveMonotoneX

3次スプライン補間(y方向) d3.curveMonotoneY

d3.curveMonotoneY

ステップ(中央) d3.curveStep

d3.curveStep

ステップ(終点) d3.curveStepAfter

d3.curveStepAfter

ステップ(始点) d3.curveStepBefore

d3.curveStepBefore

データ区間補間 (端部補間無し)

スプライン補間 d3.curveBasisOpen

d3.curveBasisOpen

カーディナルスプライン補間 d3.curveCardinalOpen

d3.curveCardinalOpen

この関数はd3.curveCardinalOpen.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRomOpen

d3.curveCatmullRomOpen

この関数はd3.curveCatmullRomClosed.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。デフォルトは0.5です。

閉ループ

線形補間 d3.curveLinearClosed

d3.curveLinearClosed

スプライン補間 d3.curveBasisClosed

d3.curveBasisClosed

カーディナルスプライン補間 d3.curveCardinalClosed

d3.curveCardinalClosed

この関数はd3.curveCardinalClosed.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRomClosed

d3.curveCatmullRomClosed

この関数はd3.curveCatmullRomClosed.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。デフォルトは0.5です。

階層補間

スプライン補間 d3.curveBundle

d3.curveBundle

この関数は、d3.curveBundle.beta(b)として段階の係数を指定できます。bのデフォルトは0.85です。グラフは、1.0、0.5、0の例を表示しており、0とすると始点と終点を結ぶ直線となります。