*

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

公開日: : 最終更新日: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

世界地図を表示する

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。こ

記事を読む

D3.js

図形の位置やサイズを指定する

前回は、svg要素、rect要素を生成しました。 ですが、SVGでは要素を生成しただけでは、何も表

記事を読む

D3.js

日本の地図データ(国土数値情報)を使い、地図を表示する

世界地図を表示したので、今回は日本国内の地図を表示します。サンプルコードにコメントを付しましたので、

記事を読む

D3.js

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。 サンプルコードの実行結果はこちら

記事を読む

D3.js

縦棒グラフに目盛りを表示してみる

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要

記事を読む

D3.js

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

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

記事を読む

D3.js

グラフをソートして表示する

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけでは

記事を読む

D3.js

HTML形式とXML形式ファイルを読み込む

HTMLファイルを読み込む D3.jsではHTMLファイルを読み込むこともできます。 データは、

記事を読む

スポンサードリンク

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 ↑