スポンサーリンク
スポンサーリンク

折れ線グラフを曲線、直線、階段状に表示する

D3.jsでは折れ線グラフを直線で表示するのではなく、曲線、階段状に表示することもできます。D3.jsでは、下記の表にある補間方法があります。

補間方法 説明
linear 直線(両端が開いている)
linear-closed 直線(両端が閉じている)
step 階段状
step-before 階段状(原点から最初のデータを表示)
step-after 階段状(X座標の0の位置から始まり、次の値に最初のデータを表示)
basis Bスプライン曲線
basis-open Bスプライン曲線(両端が開いている)
basis-close Bスプライン曲線(両端が閉じている)
bundle スプライン曲線
cardinal カーディナルスプライン曲線
cardinal-open カーディナルスプライン曲線(両端が開いている)
cardinal-close カーディナルスプライン曲線(両端が閉じている)
monotone モノトーン補間

上記の補間方法はd3.svg.line()メソッドで指定します。メソッドチェーンを使いinterpoolate(“step”)のようにして指定します。interpolate()メソッドは円グラフでも登場しましたが、補間処理を行ってくれるものです。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました