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

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

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

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

D3.js

D3.jsでSVG図形を作成してみる

2015/10/14    SVGで図形表示

ページ内にdiv要素の中にsvg要素およびSVG図形の１つであるrect要素を 生成します。svg要素にはスタイルシートを設定します。 svg要素を生成する svg要素を生成対象となるdiv要素を指定 ...

no image

D3.js

グループと図形移動

2015/10/13    グループ, 複数のSVG要素

複数のSVG用をまとめて扱う場合に必要なものはグループ化です。 SVGではg要素を使って要素を囲みます。グループ化すると要素の スタイルや位置を纏めて扱うことができます。g要素のスタイルは 内包する要 ...

no image

D3.js

文字を描画する

2015/10/13    SVGで文字描画, XML

SVGで文字を表示するにはtext要素を使います。<text>とと</text>の 間に表示する文字列を書きます。ただ、このままでは文字は表示 されません。文字を表示するには、 ...

no image

D3.js

正円とパスを描画する

2015/10/13    XML

次は正円を描画します。正円を描画するには、circle用を使い、 下記の表の属性を指定することで正円が描画できます。 属性 説明 cx 円の中心のX座標　省くと０ cy 円の中心のY座標　省くと０ r ...

no image

D3.js

四角形・角丸四角形を描画する

2016/1/24    XML, 四角形描画, 図形描画, 角丸四角形描画

SVGは図形を表す要素を指定することで描画を実行します。 SVGは下記の表に示す図形要素があります。 要素 説明 rect 四角形・角丸四角形 circle 正円 ecllipse 楕円形 line ...

no image

D3.js

SVGとは

2015/10/13    SVG, XML, 円描画, 四角形描画

SVGとはScalable Vector Graphicsの頭文字をとったもので、 ベクトルベースのグラフィックを描画するためのマークアップ言語です。 マークアップ言語といえばHTML/XMLを思い浮 ...

no image

D3.js

多機能アニメーション付棒グラフを作ってみる

2015/10/13    多機能, 棒グラフ

たいそうな記事のタイトルですが、過去７記事で書いたことを まとめた棒グラフを作成します。 サンプルコードの実行結果はこちら

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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>棒グラフを表示する表に色々機能をつけてみる</title>
 
<style>
#sampleGraph{width:100%;}
.axis text{font-size:16px;}
 
.axis path,.axis line{
fill:none;
stroke:black;}
</style>
 
<script src="../js/d3.js"></script>
</head>
<body>
<h1>表を作成する</h1>
<button id="upDateGraph" style="margin-bottom:16px;">グラフ更新</button>
<svg id="sampleGraph">
</svg>
 
<script src="test.js"></script>
</body>
</html>

[cray ...

no image

D3.js

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

2015/10/13    目盛りを表示

今回はグラフに加えて目盛りを表示します。 目盛りのスタイルを決めて、設定する 目盛りや数値やラベル、線のスタイルを設定します。 コードを実際に書いて設定することもできますが、 分業しておいたほが後々、 ...

no image

D3.js

D3.jsで外部データを読み込む

2015/10/12    CSVファイル, 外部データ読込

前回までは、予めプログラム内に書かれた数値を もとにして棒グラフを表示しました。 実際にD3.jsを使う場合はプログラム内にデータを用意して おくというのはまずないと思います。多くの場合は、 データは ...

no image

D3.js

マウスイベントでグラフの色を変更する

2015/10/12    on()メソッド, style()メソッド, メソッドチェーン

前回のまでの記事で、HTML上にあるボタンをクリックして グラフを変化させました。D3.jsではSVG要素にもイベントを 設定することができます。 SVG要素にイベントを設定する場合もon()メソッド ...

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

参加中のランキング



にほんブログ村 ＩＴ技術ブログへ
にほんブログ村

最近の投稿

  • トグルスイッチを設定する
  • 項目選択の複数ウィジェットをグループ化する
  • <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 ウェブ制作、コーディング初心者のメモ