スポンサーリンク
スポンサーリンク

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

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

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました