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
-

執筆者:

関連記事

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

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

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

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

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

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

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

気になるD3.jsサンプル

Hierarchical Bars バーをクリックするとその内訳がまたバーチャートになる         Collapsible Indented Tree 開閉できる階 …