D3 テスト

2c:null 2d:["$","title",null,{"children":"D3 チュートリアル 04 : 要素の追加 | SUGIMOTO Tatsuo | Observable"}] 32:[] 30:{"id":"6c552c6040f6f49f","slug":"d3-04","title":"D3 チュートリアル 04 : 要素の追加","thumbnail":"ccb055c2d2542533e8640537cb0802ed0eec316ade8d9173100518761949f180","access_level":"public","create_time":"$D2018-10-27T03:25:16.296Z","update_time":"$D2020-08-12T04:58:01.861Z","view_time":null,"first_public_time":"$D2018-11-12T04:27:53.022Z","has_unpublished_edits":null,"fork":false,"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":26,"publish_version":26,"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":1,"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 チュートリアル 04 : 要素の追加","cells":[{"id":0,"value":"md`# D3 チュートリアル 04 : 要素の追加`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`はじめに、D3 を使って新しい DOM 要素を生成する必要があります。\nデータ視覚化レンダリングの場合、一般的には生成する要素は SVG オブジェクトになります。\nしかしここでは分かりやすさを優先して、パラグラフ要素 p を生成してみましょう。\n以下の簡単な HTML テンプレートを用います。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"\n`\n\n \n \n D3 テスト\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n保存してブラウザから開いてみましょう。\nデモページはこのようになります。\nページには何も表示されていませんね？　\nしかしWebインスペクタで見ると次のような画面が表示されます。\n\n![Web inspector](http://alignedleft.com/content/03-tutorials/01-d3/40-adding-elements/1.png)\n\nHTML に戻り、script タグ中のコメントを次の行に書き換えます。\n\n d3.select(\"body\").append(\"p\").text(\"新しいパラグラフ！\");\n\n保存して再表示させます（デモページはこちら）。\nどうでしょう？　\nブランクだったページにテキストが表示されましたね。\nWeb インスペクタ画面は次のように変わります。\n\n![Web inspector](http://alignedleft.com/content/03-tutorials/01-d3/40-adding-elements/2.png)\n\n違いが分かるでしょうか。変更後のページには、DOM の中に実行時に生成された新しいパラグラフ要素が追加されています。大した違いには見えないかもしれません。しかしこのテクニックを使えば、データセットに対応した数十、数百の要素を動的に生成できるようになります。\n\n今起こったことを順番に見ていきましょう。\n\n1. D3 の select メソッドを呼び出します。このメソッドは、CSS セレクタ構文を使って DOM の中から要素を一つ選択します（ここでは body を選択しました）。\n2. 新しく p 要素を生成し、現在のセレクション（選択要素）の最後に追加します。今回の場合、終了タグの直前になります。\n3. 空のパラグラフ要素のテキストに「新しいパラグラフ！」をセットします。\n\n間に挟まれたなぞのドット（ . ）は、D3 のチェイン構文です。\n\n次章はメソッドのチェイン → `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"