• about me
  • コンテンツについて
  • メルマガ登録

コーディング関連の情報をお届けします。

ウェブ制作、コーディング初心者のメモ

  • コンテンツについて
  • メルマガ登録
  • about me
no image

D3.js

グラフをアニメーションさせる

2015/10/12    transition()メソッド, アニメーションをしながら

前回の記事でデータセットに応じてグラフに変化を付しました。 ボタンをクリックするとすぐに書き換わってしまいます。 そこで今回は、ボタンがクリックしたらアニメーションをしながら 棒グラフを変化するように ...

no image

D3.js

D3.jsでデータを変更する

2015/10/12    棒グラフ

前回の記事で、横棒グラフを表示しました。 今回は、ボタンを押したら動的にデータを変更して、 その結果を即座にグラフに反映させるプログラムを書きます。 サンプルコードの実行結果はこちら [crayon- ...

no image

D3.js

D3.jsを複数の棒グラフを表示する

2015/10/12    複数の棒グラフを表示する

前回の記事では、四角形と一本の棒グラフを表示させました。 しかし、データが複数がある場合は、データの数だけ append("rect")とattr()を使い四角形を生成すればいいでしょうか。 表示する ...

no image

D3.js

D3.jsとrect要素を使い四角形を表示する

2015/10/12    rect要素, SVGで図形表示

タイトルの通りD3.jsを使い棒グラフを用意します。 サンプルコードの実行結果はこちら

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>D3.js 棒グラフを表示してみる</title>
 
<!-- D3.jsライブラリを読み込む
下記の読み込み処理を忘れるとD3.jsの機能を
  使うことができない
-->
<script src="../js/d3.js"></script>
</head>
<body>
<h1>まずは四角形を表示する</h1>
<svg>
<rect x="80" y="40" width="100" height="60">
</svg>
<h1>棒グラフ(一本)をD3.jsを使って表示します。</h1>
 
<!-- グラフを表示するための空間確保
グラフの表示はSVGを使用する。SVG図形を表示するために
HTML内に下記のように書く -->
<svg id="sampleGraph">
</svg>
 
<!-- グラフを表示する命令が
書かれたJSファイルを読み込む -->
<script src="test.js"></script>
</body>
</html>

[crayon-69b6bb219c5a648 ...

no image

D3.js

D3.jsの基本的な流れ

2015/10/12    D3.jsの使い方

D3.jsで作成するグラフのプログラムの構造は 下記のように考えます。 1.データの読み込み D3.jsではCSV(カンマ区切りのテキスト)や TSV(タブ区切りテキスト)、XML形式などのメジャーな ...

no image

D3.js

D3.jsって何?

2015/10/12    D3.js, デベロッパーツール, 開発ツール

D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。 D3.jsが表現できるグラフは様々です。 ★注意 この「D3.js」のカテゴリーの記事では、JavaScriptの基 ...

php

PHPデバック時に使えそうな小ネタ

2015/10/8    デバッグ, 小ネタ

タイトルの通り、プログラムを書いて実行したんだけど 動画がおかしいとき(デバッグ時)に役に立つかもしれない 小ネタを書きます。 PHPには、次の定数が予め定義されています。 定数名 置き換えられる内容 ...

php

PHPの例外処理

2015/10/8    Exceptionクラス, エラー制御演算子, 例外を送出, 例外処理, 例外拡張

プログラムを実行したときに、エラーが起きることがあります。 ユーザーフォームに入力したデータが無効な値であったり、 数値の入力をしなければならない箇所に、文字列を設定した時などです。 PHPでは、こう ...

php

DOMでRSSを使ってみる

2015/10/7    DOMでRSS, RSS

RSS(RDF Site Summary) とは、サイトのようやくを、 タイトル、リンク、簡素な説明などの要素によって表します。 各記事は項目(item)を表す要素内に整理されます。 今回はDOMを使 ...

php

SAXを使ってみる

2015/10/7    SAX

DOMと並んでXML文書を扱う仕様として出てくるのが、 SAX(Simple API for XML)です。 SAXは、XML文書を先頭から読み込んで、そこに出てくる要素や テキストに応じて処理をしま ...

« Prev 1 … 11 12 13 14 15 … 40 Next »
  • Twitter
  • Share
  • Pocket
  • Hatena
  • LINE
  • URLコピー

参加中のランキング



にほんブログ村 IT技術ブログへ
にほんブログ村

最近の投稿

  • トグルスイッチを設定する
  • 項目選択の複数ウィジェットをグループ化する
  • <select>により項目選択
  • 値を選択するボタンを表示する
  • ボタンを設定する

最近のコメント

    アーカイブ

    • 2016年5月
    • 2016年4月
    • 2016年3月
    • 2016年2月
    • 2016年1月
    • 2015年12月
    • 2015年11月
    • 2015年10月
    • 2015年9月
    • 2015年8月
    • 2015年7月
    • 2015年6月
    • 2015年5月

    カテゴリー

    • CSS (57)
    • D3.js (75)
    • HTMLページ構造 (18)
    • HTML文章関連 (25)
    • javaScript (41)
    • jQuery (56)
    • jQueryMobile (29)
    • php (91)

    タグ

    break文 CSVファイルを読込 DOM for文 if文 imagesLoaded jQuery独自 Masonry switch文 while文 XML アイコン アニメーション イベント グラデーション グローバル変数 セレクター タブ パックレイアウト ヒストグラム ヒートマップ フォーム フレックスコンテナ ボタン ポップアップ メソッド メソッドチェーン メタ文字 ローカル変数 優先順位 円グラフ 四則演算 変数 折れ線グラフ 散布図 条件分岐 横に並べる 正規表現 演算子 縦棒グラフ 繰り返し 論理演算子 連想配列 配列 関数

    スポンサードリンク

    コーディング関連の情報をお届けします。

    ウェブ制作、コーディング初心者のメモ

    © 2026 ウェブ制作、コーディング初心者のメモ