30:T948,md`### SVG の生成まず最初に SVG 要素の生成です。すべてのシェイプはこの SVG 要素の中に配置されます。 d3.select("body").append("svg"); この式は body を検索し、その終了タグの直前に svg 要素を新規追加します。これでも問題はありませんがもう一工夫してみましょう。 const svg = d3.select("body").append("svg"); ここでほとんどの D3 メソッドは操作した要素の参照を返す、ということを思い出してください。この式は append() が生成した要素の参照を、新しい変数 svg に記録しています。この変数 svg は、単なる変数ではなく、新規に生成した SVG オブジェクトを指す参照であると理解してください。参照を変数に記録しておけば、あとあと無駄なコードを書く手間がはぶけます。また毎回 d3.select("svg") を使って DOM 内を検索するより svg を呼ぶ方が高速になります。 svg.attr("width", 500) .attr("height", 50); 上記のコードを一行にまとめて書くこともできます。 const svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 50); サンプルページをご覧ください。空白のページが表示されますが、例により Webインスペクタを立ち上げると、ちゃんと空の SVG 要素が生成されているのがわかります。面倒を避けるため、幅（ width ）と高さ（ height ）の二つの値は、このページのように（ソースコード参照）、コードの最初で変数定義しておくことをお勧めします。 // width と height const w = 500; const h = 50; 今後のサンプルもこの方針に沿って書いて行きます。二つの値を変数化（＊）しておくことで、コード全体から容易に参照可能になるからです。 const svg = d3.select("body") .append("svg") .attr("width", w) // <-- ここ！ .attr("height", h); // <-- ここにも！（＊）変数化という単語は存在しませんが、もしこの単語を辞書に登録しようという運動があったら喜んで署名させていただきます（笑） `31:T1023,md`### データドリブン・シェイプいよいよシェイプの追加です。お馴染みのデータセットに再登板してもらいましょう。 const dataset = [ 5, 10, 15, 20, 25 ]; 作るのは円シェイプです。data() メソッドを使い、各データポイントごとに circle を生成します。 svg.selectAll("circle") .data(dataset) .enter() .append("circle"); selectAll() メソッドがすべての circle要素の空参照（この時点ではまだ circle 要素は存在していません！）を返すのを憶えていますか？data() メソッドは、データセットとこれから生成する要素をバインドします。次に enter() メソッドが新しく作る要素のためのプレイスホルダーの参照を提供し、最後にappend() メソッドが circle 要素を DOM に追加して行きます。ここでも後々のため、生成する circle 要素への参照を変数に記憶しておきます。 const circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); OK です。次にこの円に位置とサイズを設定します。いきなり複雑なコードが登場しますが、ここでくじけないように！ circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h/2) .attr("r", function(d) { return d; }); ![Row of data circles](http://alignedleft.com/content/03-tutorials/01-d3/110-drawing-svgs/1.png) 実際に表示されるのはそんなに複雑な画面ではありませんね？　コードを一行ずつ順番に理解して行きましょう。 circles.attr("cx", function(d, i) { return (i * 50) + 25; }) 一行目はすべての circle 要素の参照を受け取り、それぞれに cx 属性を設定しています。cx の値の設定には無名関数を使っています。データはすでに circle 要素とバインドされているため、仮引数 d には、元のデータセット (5, 10, 15, 20, 25) の対応する値が渡されます。引数 i には現在の値のインデックス番号が渡されます。attr() の値を設定する無名関数に第二引数を指定すると、data() メソッドの働きにより、現在の値が配列内の何番目の要素であるかを示す数字（インデックス番号）が i に自動的にセットされるのです。i は 0 から始まる整数値で、1番目の要素は i == 0、2番目は i == 1、以下同様となります。この行では、ループごとに i が 1 ずつ増加するのを利用して、円の位置を順次右へと配置しています。 (0 * 50) + 25 = 25 (1 * 50) + 25 = 75 (2 * 50) + 25 = 125 (3 * 50) + 25 = 175 (4 * 50) + 25 = 225 インデックス値の i を使うにはこれを無名関数の引数に含めておく必要があります（function(d, i)）。また、今回の例のように関数内で使わない場合でも、引数には d は含めておかなければなりません。もしここで function( i ) としても、i には元の式の d の値が渡されるだけです。なお、iも仮引数ですので、ここに j や k、index を使っても問題はありません。慣例的には i を使います。次に 2 行目です。 .attr("cy", h/2) h は SVG 要素全体の高さでした。したがって h/2 はその半分の高さとなります。h を変数で定義しておいたのが役立ちましたね。この式によって、すべての circle 要素の中心位置は、同じ高さで横一線に並ぶことになります。 .attr("r", function(d) { return d; }); 最後の行で各 circle の半径 r を設定します。ここでは、そのまま d の値、すなわち対応するデータの値を設定しています。 [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-11-1) `32:[] 2e:{"title":"D3 チュートリアル 11 : SVGの描画","cells":[{"id":0,"value":"md`# D3 チュートリアル 11 : SVGの描画\n\n前章で SVG 画像とその要素の基本的仕組みについてはしっかり理解できたでしょうか？　\n本章ではいよいよデータからシェイプを生成する方法に入ります。\n\nすでにお気づきの方もおいででしょうが、SVG 要素のプロパティはすべてその要素の**属性**として指定します。\n各要素のタグ内に、プロパティと値の組み合わせとして記述するのです。下がその一般式です。\n\n \n\nそうです、これは通常の HTML 要素とまったく同じ書式です。\n\n

\n\nHTML 要素の新規生成とその属性の設定は、便利な D3 の append() と attr() メソッドを使って行います。SVG 要素も、DOM の部品である点に関しては HTML 要素と変わりありません。つまり SVG 画像も、HTML 要素と同様に append() と attr() を使って生成できるのです。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`### [補足]Observableの場合\n\n上記のサンプルをObservableで書く場合、次の3つのセルを作ってください。\n\n[1]\n\n w = 500;\n\n[2]\n\n h = 50;\n\n[3]\n\n svg = {\n const svg = DOM.svg(w, h); // w x h px のSVGを作成します\n return svg;\n }\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`### シェイプの色\n\n塗り（ fill ）と線（ stroke ）の色も、同じ attr() メソッドの別の属性で指定できます。次のコードを追加するだけです。\n\n .attr(\"fill\", \"yellow\")\n .attr(\"stroke\", \"orange\")\n .attr(\"stroke-width\", function(d) {\n return d/2;\n });\n\nできあがりです！（[サンプル画面はこちら](http://alignedleft.com/tutorials/d3/drawing-svgs/4.html)）\n\n![Colorful data circles](http://alignedleft.com/content/03-tutorials/01-d3/110-drawing-svgs/2.png)\n\nこの章で解説したサンプルは、もちろん SVG の使い方のほんの一例に過ぎません。\n自分で属性の組み合わせや関数の中身を工夫したり、プロパティの値を色々変更してみましょう。\n読み手に分かりやすく有益となるような上手なデータ視覚化を行う秘訣は、\n最適なマッピング（データと要素の対応づけ）を選択することにあります。\n\n次章はデータ型 → `","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html``","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 超簡単\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 超簡単\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 超簡単y`","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 には次のプロパティも設定可能です。指定方法は CSS と同様です。\n\n- font-family\n- font-size\n\n普通の HTML 要素と SVG 要素のもう一つの類似点は、いずれも二通りの方法でスタイルを設定できることです。一つは直接（インラインで）要素の属性として設定する方法、もう一つは 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 {\n /* ... */\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`### レイヤーと描画の順序\n\nSVG にはレイヤも深度の概念もありません。また、CSS の z-index プロパティもサポートしていません。したがってシェイプはすべて単一の x/y 二次元平面上に配置されます。\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":"$W32","stdlib":"1","titling":"auto"}