2016-01

スポンサーリンク
D3.js

読み込んだCSVファイルのヘッダー名が日本語だったら

TSV,CSVファイルのヘッダー名が英語であるとは限りません。 日本語で書かれたりすることもあります。 この場合の対処方法を書いていきます。日本語が含まれているときは、 javaScriptの連想配列(ハッシュ)を使うと簡単に処理...
D3.js

D3.jsでTSV(タブ区切りデータ)形式のファイルを読み込む

D3.jsでデータとデータがタブコードで区切られたファイル形式である TSV形式も扱う事ができます。タブ区切りテキストは、シンプルで 扱いやすいです、エクセルでも、このTSV形式を出力することができます。 D3.jsでは最初の1行...
D3.js

複数の図形を操作する

D3.jsでは複数の図形を操作するにはselectAll()メソッドを使います。 selectAll()メソッドの引数には要素名、CSSクラス名を指定します。 該当する要素があれば、それらすべてを戻り値として返します。 メソッドチェー...
D3.js

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

D3.jsで図形の属性はattr()メソッドでしました。 図形のスタイルはどう指定すればいいのか。 答えあ、d3.jsではスタイルを設定するためのスタイル()メソッドが 用意されています。第1引数にスタイルのプロパティ名を指定し、 ...
D3.js

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

前回は、svg要素、rect要素を生成しました。 ですが、SVGでは要素を生成しただけでは、何も表示されません。 図形の位置やサイズを指定しなければなりません。 D3.jsで図形の位置やサイズを指定するには、 attr()メソッドを...
D3.js

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

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

グループと図形移動

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

文字を描画する

SVGで文字を表示するにはtext要素を使います。<text>とと</text>の 間に表示する文字列を書きます。ただ、このままでは文字は表示 されません。文字を表示するには、文字の色(又はは線の色)を指定 し...
D3.js

正円とパスを描画する

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

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

SVGは図形を表す要素を指定することで描画を実行します。 SVGは下記の表に示す図形要素があります。 要素 説明 rect 四角形・角丸四角形 circle 正円 ...
スポンサーリンク
タイトルとURLをコピーしました