図形のスタイルを指定する

2015年10月15日

D3.jsで図形の属性はattr()メソッドでしました。
図形のスタイルはどう指定すればいいのか。
答えあ、d3.jsではスタイルを設定するためのスタイル()メソッドが
用意されています。第１引数にスタイルのプロパティ名を指定し、
第２引数に設定値を指定します。たとえば、
stroke-widthプロパティに１０を設定する場合は
style("stroke-width",10)と指定します。単位を付けて設定する場合は、
style("stroke-width","10px")と書き、数値ではなく文字列を書きます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>図形のスタイルを指定する</title>

	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}

	</style>
</head>
<body>
	<h2>D3.jsでスタイルを操作してみる</h2>
	<svg>
		<rect x="0" y="20" width="100" height="40" id="rect1" />
	</svg>
	<h2>クラス名を付して複数のrect要素のスタイル変更</h2>
	<svg>
		<rect x="120" y="20" width="20" height="20" class="rect2" />
		<rect x="120" y="45" width="20" height="20" class="rect2" />
		<rect x="120" y="70" width="20" height="20" class="rect2" />
		<rect x="120" y="95" width="20" height="20" class="rect2" />
	</svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>図形のスタイルを指定する</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

</style>

</head>

<body>

<h2>D3.jsでスタイルを操作してみる</h2>

<svg>

</svg>

<h2>クラス名を付して複数のrect要素のスタイル変更</h2>

<svg>

</svg>

</body>

</html>

	d3.select("#rect1")
	.attr("x"     ,"20px")
	.attr("y"     ,"40px")
	.attr("width" ,"50px")
	.attr("height","80px")
	.style("fill","blue")
	.style("stroke","yellow");

	/*
	複数のclass属性値.rect2を変更する場合は
	selectAll()メソッドを使う
	*/
	d3.selectAll(".rect2")
	.style("fill","yellow")
	.style("stroke","blue");

d3.select("#rect1")

.attr("x" ,"20px")

.attr("y" ,"40px")

.attr("width" ,"50px")

.attr("height","80px")

.style("fill","blue")

.style("stroke","yellow");

複数のclass属性値.rect2を変更する場合は

selectAll()メソッドを使う

d3.selectAll(".rect2")

.style("fill","yellow")

.style("stroke","blue");

スタイルの設定はCSSで行う

ウェブではプログラムからスタイルを直接操作するのは、
あまりお勧めしません。プログラム内にデザインの変更する処理が
内包されると、デザインを変更する際、プログラムの修正が
必要になるからです。また、デザインとコーディングが分離できないので
プログラマーの負担も増えます。これを避けるのであれば、
プログラムのコードのなからっからデザイン部分を極力
分離させた方が良いです。

D3.jsではどうすればいいのか。
予めCSSクラス名を使って表示するデザイン(フォントとか色とか)を
用意して、attr()メソッドを使ってCSSクラス名を付すようにします、
こうすれば色やフォントを変えたいとき、プログラムの修正は不要で
CSSのみを変更すればいいです。

attr()メソッドでスタイルを一括指定する

attrメソッドを使いスタイルを一括します

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>attr()メソッドで一括指定</title>

	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}

	</style>
</head>
<body>

	<h2>attr()メソッドでスタイルを一括指定してみる</h2>
	<svg>
		<rect x="120" y="20" width="20" height="20" class="rect2" />
		<rect x="120" y="45" width="20" height="20" class="rect2" />
		<rect x="120" y="70" width="20" height="20" class="rect2" />
		<rect x="120" y="95" width="20" height="20" class="rect2" />
	</svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>attr()メソッドで一括指定</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

</style>

</head>

<body>

<h2>attr()メソッドでスタイルを一括指定してみる</h2>

<svg>

</svg>

</body>

</html>

	d3.selectAll(".rect2")
	.attr("style","fill:red;stroke:green;");

1 2	d3.selectAll(".rect2") .attr("style","fill:red;stroke:green;");

-D3.js
-attr()メソッド

comment コメントをキャンセル

D3.js

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

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

<!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>

<!DOCTYPE html>

<head>

<title>D3.js 棒グラフを表示してみる</title>

<!-- D3.jsライブラリを読み込む

下記の読み込み処理を忘れるとD3.jsの機能を

　　使うことができない

-->

</head>

<body>

<h1>まずは四角形を表示する</h1>

<svg>

</svg>

<h1>棒グラフ(一本)をD3.jsを使って表示します。</h1>

<!-- グラフを表示するための空間確保

グラフの表示はSVGを使用する。SVG図形を表示するために

HTML内に下記のように書く -->

</svg>

<!-- グラフを表示する命令が

書かれたJSファイルを読み込む -->

</body>

</html>

[crayon-662340a763a7c80 ...

D3.js

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

２次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>折れ線グラフの線を色々な形にする</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:400px;
		height:300px;
		border:2px solid red;}
	.line{fill:none; stroke:black;}

	.axis text{font-size:11px;}
	.axis path,
	.axis line{ fill:none; stroke:black;}
	.axisX line{fill:none; stroke:black;}

	.red  { stroke: red;}
	.blue { stroke: blue;}
	.green{ stroke: green;}
	</style>

</head>
<body>
	<h2>折れ線グラフの線を色々な形にする</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>折れ線グラフの線を色々な形にする</title>

<style>

svg{

width:400px;

height:300px;

border:2px solid red;}

.line{fill:none; stroke:black;}

.axis text{font-size:11px;}

.axis path,

.axis line{ fill:none; stroke:black;}

.axisX line{fill:none; stroke:black;}

.red { stroke: red;}

.blue { stroke: blue;}

.green{ stroke: green;}

</style>

</head>

<body>

<h2>折れ線グラフの線を色々な形にする</h2>

</body>

</html>

[cray ...

: D3.js

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

メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。call()メソッドのパラメータには関数を指定します。datum()メソッドを以前の記事で説明しましたが、 ...

: D3.js

正円とパスを描画する

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

: D3.js

パックレイアウトの生成

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは階層化レイアウト機能の１つとしてあります。パックレイアウト作成の基本パックレイアウトを作成するに ...

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

複数の図形を操作する