D3.js

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

投稿日:

基本になるrectを追加

SVG 1.1 仕様 (第2版) 日本語訳


API Reference

d3.jsで四角形rectを作成するには最低限width、height、色を指定すればいい

色はcssでstrokeとfillを指定している

角丸

角丸にするにはrxとryを指定すればOK

半透明

透明度はcssで指定してもいいし、d3.jsから指定してもいい

透明度を変化させる場合はd3.jsで指定する

グラデーション

参照ページ 10分でわかるSVG 基礎編

グラデーションはdefsに定義して、rectのfillでそのidを指定する

ドロップシャドウ

参照ページ SVG Drop Shadows

ドロップシャドウはsvgのfilterを複数つかって実現する

filterはグラデーションと同じくdefsで定義して、rectのfilterでそのidを指定する

offsetとblend

blur

影を黒くする

影を色付きのまま暗くする

ライティング

参照ページ SVGで図形やアニメを描画してみよう

Diffuseライティング

diffuseライティングはゴムや布など光沢のない質感を表現するらしい

リンク先に詳しく書いてあるけどよくわからない

Specullerライティング

specullerライティングは金属やプラスチックなどの鏡面反射光を表現するらしい

html要素を追加する~foreignObject

参照ページ svg要素の基本的な使い方まとめ

rectにテキストを重ねるにはsvgのtext要素を使う方法とhtml要素を追加する方法がある

html要素を追加すれば自動で折り返しができる.ただし、foreignObjectにはブラウザ間の問題がありそうなので、ほかの場合はsvgのテキストを使うほうがよさそう.

-D3.js
-

執筆者:

関連記事

Inkscapeでsvgのグラデーションとフィルターを作成してみた

    Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった 参考にしたページ www.atmark …

svgでビジュアライゼーションことはじめ~d3.js

  d3js.org/ nvd3.com/ 参照 www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm   環境 ubuntu serv …

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …