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 …

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加

 

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

no image

d3.jsで力指向グラフを使って遊ぶ2

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …