2c:null 2d:["$","title",null,{"children":"D3 チュートリアル 08 : DIV要素の描画 | SUGIMOTO Tatsuo | Observable"}] 32:T857,md`### スタイルの設定 \`style()\` メソッドは、CSS のプロパティと値を直接 HTML 要素に設定するために用いられます。これは、\`style\` 属性を用いて、次のように直接 HTML 内に　CSS ルールを設定するのと同じことです。

棒グラフでは、棒の高さが対応するデータと相関していなければなりません。よって D3 のコードの最後に次の一行を加えます。 .style("height", function(d) { return d + "px"; }); ![A small bar chart!](http://alignedleft.com/content/03-tutorials/01-d3/80-drawing-divs/2.png) ではサンプル画面をご覧ください。小さいながら棒グラフが表示されました！ D3 がデータポイントをループするたびに、\`d\` の値には対応するデータポイントがセットされます。そのため \`height\` プロパティの値には、\`d\` （現在のデータの値）と \`px\` （単位がピクセルであることを示す文字列）を結合したものを設定します。結果としてそれぞれの棒の高さは \`5px, 10px, 15px, 20px, 25px\` となるのです。さて、このままでは見た目がいまいちです。もう少し背を高くしてみましょう。 .style("height", function(d) { var barHeight = d * 5; // 高さを 5 倍にします return barHeight + "px"; }); また、棒の間隔を空けるためにスペースも追加します。 margin-right: 2px; ![The final bar chart](http://alignedleft.com/content/03-tutorials/01-d3/80-drawing-divs/3.png) 完成です！　 SIGGRAPH (※) にも持ち込める出来ばえになりました。 (※)SIGGRAPH：アメリカのコンピュータグラフィックスに関する権威ある会議・学会。 [完成したデモ画面を見てみましょう](http://alignedleft.com/tutorials/d3/drawing-divs/3.html)。再びソースを見て、Webインスペクタを開いて元の HTML と最終的な DOM を比較してみましょう。次章はdata() の力 → `33:[] 30:{"id":"9936af0a887fe8a9","slug":"d3-08-div","title":"D3 チュートリアル 08 : DIV要素の描画","thumbnail":"b8ed147b401df2ce5827624af653833e204845167bd0147ed81bf88b20c11641","access_level":"public","create_time":"$D2018-11-12T07:26:02.484Z","update_time":"$D2020-08-12T05:00:17.171Z","view_time":null,"first_public_time":"$D2018-11-19T04:06:30.104Z","has_unpublished_edits":null,"fork":{"id":"44028265c2bc825f","slug":"d3-07","title":"D3 チュートリアル 07 : データを使用する","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":"starter_2024"},"version":377,"publish_version":377,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d18af1c9be52102e","slug":"d3","title":"D3 Tutorial Japanese D3チュートリアル日本語版","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"type":"notebook","body":{"titling":"auto","title":"D3 チュートリアル 08 : DIV要素の描画","cells":[{"id":0,"value":"md`# D3 チュートリアル 08 : DIV要素の描画\n\n本章では、いよいよデータを使った描画に取り掛かります。\n\n作業には、引き続き前章と同じシンプルなデータセットを使います。\n\n const dataset = [ 5, 10, 15, 20, 25 ];\n\nこれから作るのはごく単純な棒グラフです。\n棒グラフとはつまるところ長方形のことです。\nそして長方形を描くのに一番簡単なのは HTML の \\`

\\` 要素を使うことです\n（実は Web ブラウザにとってはすべての要素が長方形です。\nそのためここにあげる例は \\`span\\` 要素等の任意の要素に簡単に当てはめることができます）。\n\nデータ表示用の棒は、こんな感じの \\`div\\` でよいでしょう。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`（Web標準の考え方では、これはセマンティック的に好ましい\\`div\\`要素の使い方ではありません。\n一般にたんに視覚効果の目的のために、空の \\`div\\` を使うべきではないとされているからです。\nただし例外もあります。たとえば、チュートリアル教材として使う場合です（笑））`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`\nこの\\`div\\`は、\\`width\\`と\\`heigh\\`tをCSSスタイルで指定しています。\nグラフのバーは（heightを除いて）同じ表示属性を再利用できますので、この共有するスタイルを\\`bar\\`というクラスで定義します。\n\n div.bar {\n display: inline-block;\n width: 20px;\n height: 75px; /* この数値は実行時に上書きされます */\n background-color: teal;\n }\n\nこの新しい CSS ルールを適用するためには、各 \\`div\\` に \\`bar\\` クラスを割り当てる必要があります。\n手作業で HTML を書く場合には次のようなコードになります。\n\n

\n\nD3 を使って要素にクラスを追加するには \\`selection.attr()\\`を用います。\nここで、\\`attr()\\` とその類似メソッドである \\`sytle()\\` の違いをしっかりと理解しておく必要があります。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`### 属性の設定\n\n\\`attr()\\` は、要素の HTML 属性とその値を設定するために用います。\nHTML 属性とは、要素の \\`<>\\`カッコ内に含めることのできる任意のプロパティと値の組み合わせのことです。\n次の例を見てください。\n\n