30:[] 2e:{"title":"D3 チュートリアル 10 : SVGの基本","cells":[{"id":0,"value":"md`# D3 チュートリアル 10 : SVGの基本\n\nD3 が一番力を発揮するのは、ビジュアルを SVG で生成し、操作する場合です。前章で学んだように div 等のネイティブな HTML 要素を使って描画する方法もあります。しかしこれはあまりスマートな方法と言えない上、ブラウザ間の非互換性のために表示の一貫性も欠いてしまいがちです。SVG を使うことで、より信頼性が高く、一貫性があり、高速な描画が可能になるのです。\n\nSVG ファイルはイラストレータのようなベクターイメージ編集ソフトで生成できますが、D3 で必要となるのは、コーディングによって動的に SVG を生成する方法です。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### SVG 要素\n\nSVG（スケーラブル・ベクター・グラフィックス）はテキストベースの画像フォーマットです。SVG 画像は HTML に似たマークアップ言語で記述します。SVG のコードは、直接 HTML 文書内に記述することが可能です。インターネット・エクスプローラのバージョン8以前を除くすべてのブラウザは SVG をサポートしています。SVG は XML をベースとしているため、終了タグを持たない要素は自己終了タグでなければなりません。例を挙げてみます。\n\n \n \n\n何を描くにしろ、最初にすべきことは SVG 要素の生成です。SVG 要素は、これから絵を描いて行くためのキャンバスだと理解してください（この観点から、 SVG は HTML の canvas 要素に似た概念であると言えます）。SVG 要素を生成する際には、最低限 width と height の値を設定しておく方がよいでしょう。さもないと、SVG は親要素のすべての領域を占有してしまうからです。\n\n \n\nこのコードで生成した SVG が次の画像です。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`なにも見えませんね？　\n上の空白スペース上でマウスを右クリックし、コンテキストメニューから「要素を検証」を選んでみましょう。\nWebインスペクタが開き、下のような画面が表示されるはずです（ Google Chrome ブラウザの場合）。\nWeb インスペクタの反転表示されている行にマウスカーソルを持っていけばブラウザ上の対応する領域がハイライト表示されます。\n\n![](http://alignedleft.com/content/03-tutorials/01-d3/100-an-svg-primer/1.png)\n\nsvg 要素が表示され、横 500 ピクセル、縦 50 ピクセルを占めてますね？残念ながら、中身はまだ空っぽです。\n\nブラウザがデフォルトの単位として「ピクセル」を用いたことに注意してください。コード上では、500px や 50px ではなく、500 や 50 としか指定していません。明示的に px を指定することも、あるいは em、pt、in、cm、mm等、サポートされている任意の単位を指定することもできます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`### 簡単なシェイプ\n\nsvg タグ中に記述できるビジュアル要素は多数あります。 rect、circle、ellipse、line、text、line などです。\n\nsvg はピクセルベースの座標系で、描画領域の左上が原点（0, 0）となります。コンピュータグラフィックスのプログラマにはお馴染みの座標系でしょう。x の値が増加するにつれ右に移動し、y の値が増加するにつれ下に移動します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`\nrect は長方形を描きます。\nx と y で長方形の左上の座標を指定し、 width と height でサイズを指定します。\n次の例では、長方形は親要素 SVG の全領域を占めています。\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`\ncircle は円を描きます。cx と cy で円の中心の座標を指定し、r で半径（ radius ）を指定します。次の例では、cx（ cx は \"center-x\" の略）に 250を指定しているため、円は 500 ピクセル幅の SVG 領域の中心に位置します。\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`\nellipse は楕円を描きます。circle に似ていますが、円と違うのは横方向（rx）と縦方向（ry）のそれぞれの半径を指定する必要があることです。\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`\nline は線を描きます。x1 と y1 で線分の一方の端の座標を指定し、x2 と y2 でもう一方の端の座標を指定します。線を表示するためには stroke で線の色を指定しなければなりません。\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`\ntext は文字を描きます。x で文字の左端の座標を指定し、y で文字のベースラインの縦座標を指定します（アセンダライン＝上端の座標でなく、ベースラインの座標であることに注意してください）。他のシェイプ要素とは異なり、text 要素は開始タグと終了タグで表示する文字列を囲みます。\n\n 超簡単 yey!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`特に指定のない限り、text は CSS で指定された親要素のフォントスタイルを継承します。上のサンプルの文字のフォーマットが、地の文のフォーマットと同じである点に注意してください。このフォーマットを上書きするには以下のように指定します。文字色の指定には fill を使います。\n\n 超簡単 yey!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`ビジュアル要素についてもう一つ注意しておくべき点は、SVG の境界を超える部分が切れてしまうということです。特に text を使う場合、ディセンダ部分（文字のベースラインより下の部分）が切れないよう注意する必要があります。これは、下のサンプルのように、ベースラインの座標（y）が SVG の高さ（50）と同じ場合などに発生します。\n\n 超簡単 yey!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`path は、ここで紹介した単純なシェイプのほかに、より複雑な形状を描くときにも用います（地図の国境線など）。\npath についてはいつかあらためて説明したいと思います。\nこの章では単純なシェイプのみを扱います。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`### SVG 要素のスタイル設定\n\nデフォルトの SVG のスタイルは、fill が黒、stroke は無しとなっています。それ以外の設定をしたい場合は自分でスタイルを指定する必要があります。以下、一般的な SVG のプロパティについて解説します。\n\n- fill（塗りつぶしの色）: 色を表す値。CSS と同様、次の表記が可能です。\n - 色名 : orange\n - 16進数値 : #3388aa または #38a\n - RGB値 : rgb(10, 150, 20)\n - アルファ値（透明度）指定 RGB値 : rgba(10, 150, 20, 0.5)\n- stroke（外形線の色）: 色を表す値（同上）。\n- stroke-width（線の太さ） : 数値（通常はピクセル単位）。\n- opacity（透明度） : 0.0（完全に透明）から 1.0（完全に不透明）の間の数値。\n\ntext には次のプロパティも設定可能です。\n指定方法は CSS と同じです。\n\n- font-family\n- font-size\n\n普通の HTML 要素と SVG 要素のもう一つの類似点は、いずれも2通りの方法でスタイルを設定できることです。\n一つは直接（インラインで）要素の属性として設定する方法、\nもう一つは CSS スタイルルールを適用する方法です。\n\n次の例では、circle 要素に属性としていくつかのプロパティを直接設定しています。\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"md`CSS で行うには、まず circle からスタイル属性を取り除いてクラスを割り当てます（通常の HTML 要素と同じ方法です）。\n\n \n\n次に CSS で、そのクラスに fill、stroke、stroke-width の各ルールを設定します。\n\n .pumpkin {\n fill: yellow;\n stroke: orange;\n stroke-width: 5;\n }\n\n両者の比較では、CSS の方にいくつか明瞭なメリットがあります。\n\n1. 一度設定したスタイルを複数の要素に適用できる。\n2. 通常、インライン属性より CSS コードの方が読みやすい。\n3. 以上の理由で、メンテナンス性が高く、デザイン変更が容易。\n\nCSS で SVG要素のスタイル設定をしていると、ほかの一般的な HTML 要素の設定と混乱してしまうことがあります。\nfill や stroke、stroke-width が CSS のプロパティ**ではない**からです（よく似た意味の CSS プロパティに background-color や borderがあります）。\nこの場合、セレクタに要素名 svg を入れておけば、どのルールが SVG 用途なのかが分かりやすくなるでしょう。\n\n svg .pumpkin { /* SVG の子のうち pumpkin クラスの要素 */\n /* ... */\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`### レイヤーと描画の順序\n\nSVG にはレイヤも深度の概念もありません。また、CSS の z-index プロパティもサポートしていません。\nそのためすべてのシェイプは、1枚の xy 二次元平面上に配置されます。\n\nしかし複数のシェイプを描くと、下図のように重ねて配置されます。\n\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`各シェイプの深さの順（重ねられる順）が、要素のコードが書かれた順によって決まるからです。\n紫色の四角形のコードは一番最初に書かれており、したがって最初に描画されます。\n次に青色の四角形が紫色の「上」に描かれ、その上に緑色、と続きます。\n\nSVG のシェイプは、キャンバスに描かれる絵と同じように描画されると理解してください。\n後からピクセル描画されたシェイプは、先に描かれたシェイプを覆い隠し、その結果「手前」に表示されるのです。\n\nあるビジュアル要素を、常にほかの要素の前面に表示したい場合、この描画順序の仕組みが重要になります。\nたとえば散布図に軸や値ラベルなどを描く場合です。軸とラベルを一番最後に SVG に追加することで、他の要素の前面に表示することができます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### 透明度\n\n視覚化作業において、要素に透明度をくわえると大変効果を発揮することがあります。\nたとえば重なった要素を見えるようにしておきたい場合や、ある要素を強調し、他の要素を弱めたい場合などです。\n\n透明度の設定には二つの方法があります。\nアルファ付の RGB 色を使う方法と、opacity に値を設定する方法です。\n\nfill や stroke など、色を指定する場所では常に rgba() を使うことができます。\nrgba() には、赤、緑、青それぞれに 0 から 255 の間の値、アルファ値（透明度）に 0.0 から 1.0 の間の値を指定します。\n\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`rgba() が fill と stroke に個別に透明度を設定できる点に注意してください。\n次の図の円は、fill の透明度を 75%、stroke の透明度を 25% にしています。\nなお、円が三重に見えているのは、stroke-width の太さは円周の外側に 10 ピクセルではなく、円周を中心に外側に 5 ピクセル、内側に 5 ピクセルずつ広がっていて（合計 10 ピクセル )、内側が fill の色と重なっているためです。\n\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`要素全体に透明度を適用したい場合は opacity 属性を設定します。次の図はいずれも透明度 1.0 （完全に不透明）の状態の円です。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`同じ円に、順に opacity 0.9、0.5、0.1 を設定します（値が 0.0 に近づくほど透明）。\n\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`rgba() 色を設定した要素に、さらに opacity を設定することもできます。\nその場合の透明度は、両者の透明度の掛け合わせ（積）です。\n次の3つの円の fill と stroke の RGBA 値の組み合わせは同一ですが、最初の円には opacity は設定されておらず、残り2つの円には、それぞれ 0.5 と 0.2 の opacity が設定されています。\n\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`三つ目の円では、円の opacity は 0.2、つまり 20% です。\nしかし紫色の fill にはすでにアルファ値として 0.75、つまり 75% が設定されています。\nその結果、最終的な透明度は、0.2 と 0.75 の積で 0.15、すなわち 15% となるのです。\n\n次章はSVG の描画 → `","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}