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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

	<style>
	svg{
		width:320px;
		height:340px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}


	/*
		縦棒グラフにラベルを表示する設定
	*/
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	
	.axis text{
		font-family:sans-serif;
		font-size:11px;
	}
	.axis path,
	.axis line{
		fill:none;
		stroke:green;
	}
	.axisX line{
		fill:none;
		stroke:black;
	}
	.barName{
		font-size:9px;
		text-anchor:middle;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!DOCTYPE html>

<head>

<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

<style>

svg{

width:320px;

height:340px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

/*

縦棒グラフにラベルを表示する設定

*/

.barNum{

font-size:10px;

text-anchor:middle;

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

.axis path,

.axis line{

fill:none;

stroke:green;

}

.axisX line{

fill:none;

stroke:black;

}

.barName{

font-size:9px;

text-anchor:middle;

}

</style>

</head>

<body>

<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>

</body>

</html>

[crayon-69a6c18a ...

D3.js

マウスイベントでグラフを変化させる

2015/10/18 イベントハンドラ, マウスアウト, マウスイベント, マウスオーバー

D3.jsでは要素にイベントを設定することができます。この記事ではマウスカーソルが棒に重なったとき・離れたときに色を変化させてみます。 D3.jsではイベントを追加するにはon()メソッドを使います。 ...

D3.js

縦棒グラフにアニメーションを付ける

2015/10/18 アニメーション, 縦棒グラフ

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.jsでのアニメーションは下記のように行います。１．attr(),style()メソッドでアニメーション ...

D3.js

汎用的なグラフを作成する

2015/10/18 極力変数にする, 汎用性があるグラフ

グラフのサイズなど前回の記事では、コード内を色々な箇所を修正しました。毎回それをやると大変なので、修正が容易なグラフを表示するプログラムを書いていきます。サンプルコードの実行結果はこちら [cray ...

D3.js

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

2015/10/18 縦棒グラフ

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要な情報は目盛りに表示する文字列とフォント、目盛りの線の色です。サンプルコードの実行結果はこちら [ ...

D3.js

D3.jsで縦棒グラフを表示してみる

2015/10/18 グラフ内に数値, 縦棒グラフ

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は縦棒グラフも同じです。異なる点は、グラフの棒が横に伸びるか、縦に伸びるかの違いです。グラフ内に数値 ...

D3.js

データの削除

2015/10/18 データの削除

データの削除処理を書いていきます。前回の記事のサンプルコードだとデータ数と要素数が一致するときのみ適正に動作します。読み込まれたデータの数が増減するときは、動作しません。今回必要な処理は、データが ...

D3.js

データの追加と更新

2015/10/18 データの更新, データの追加

データの追加処理要素にデータを追加してグラフを表示するプログラムは何度も出てきています。データの数に応じて要素を追加するにはenter()メソッドを使います。実際に要素を追加するにはappned() ...

vesna