*

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

公開日: : 最終更新日:2016/02/22 D3.js , , ,

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()メソッドは円グラフでも登場しましたが、補間処理を行ってくれるものです。

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

スポンサードリンク

関連記事

D3.js

D3.jsのデータと要素の対応

D3.jsがどのようにして読み込んだデータと表示する要素を 対応させているかを書いていきます。

記事を読む

D3.js

D3.jsで目盛りを表示してみる

今回はグラフに加えて目盛りを表示します。 目盛りのスタイルを決めて、設定する 目盛りや数値や

記事を読む

D3.js

JSONみたいなデータを読み込んでグラフにする

まずは、サンプルコードの実行結果はこちら [crayon-5ed481638

記事を読む

D3.js

D3.jsでメソッドチェーンで独自処理をする

メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。cal

記事を読む

D3.js

2次元配列のデータを読み込んで、折れ線グラフを表示する

2次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。 サン

記事を読む

D3.js

フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利

記事を読む

D3.js

CSVファイルからデータを読み込んで、アニメーションも付けて散布図を表示してみる

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込

記事を読む

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。 サンプルコードの実行結果はこちら [

記事を読む

D3.js

正円とパスを描画する

次は正円を描画します。正円を描画するには、circle用を使い、 下記の表の属性を指定することで正

記事を読む

D3.js

CSVファイルからデータを読み込んで縦棒グラフを表示してみる

CSVファイルからデータを読み込んで表示するものを今回作成します。 サンプルコードの実行結果は

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑