2c:null 2d:["$","title",null,{"children":"D3 チュートリアル 05: メソッドのチェイン | SUGIMOTO Tatsuo | Observable"}] 32:[] 30:{"id":"c6c0a9e0021486bd","slug":"d3-05","title":"D3 チュートリアル 05: メソッドのチェイン","thumbnail":"cb1bdebd7a12c4791d3292b86b9bd59c1fa120673c86e5e45635ed259a677805","access_level":"public","create_time":"$D2018-10-27T03:33:12.738Z","update_time":"$D2019-11-13T02:30:58.696Z","view_time":null,"first_public_time":"$D2018-11-12T03:48:37.338Z","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":95,"publish_version":95,"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 チュートリアル 05: メソッドのチェイン","cells":[{"id":0,"value":"md`# D3 チュートリアル 05: メソッドのチェイン`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`D3には**チェイン構文**と呼ばれる便利なテクニックがあります。\njQueryで知っている人もいるかもしれません。\nメソッドをピリオドで**つなぐ**ことで、いくつかの動作を1行にまとめて実行することができます。\nチェイン構文は早くて簡単ですが、後でデバッグで何時間も頭を悩ますことのないように、動作の仕組みを理解しておくことが重要です。\n\nところで、**関数**と**メソッド**は同じ概念を別の言葉であらわしたものです。\nどちらも、入力として引数を受けつけ、何らかの動作を実行し、出力としてなんらかのデータを返す一連のコードです。\n\nはじめてのD3コードにもどりましょう。\n\n

\nd3.select(\"body\").append(\"p\").text(\"あたらしいパラグラフ！\");\n

\n\nこのコードは、とくにプログラミング初心者には、ひどくこんがらがってみえるかもしれません。\nJavaScriptは、HTMLと同じく、空白や改行を無視することを知っておきましょう。\nつまり次のように、各メソッドを1行ずつ書くこともできるのです。\n\n

\nd3.select(\"body\")\n    .append(\"p\")\n    .text(\"あたらしいパラグラフ！\");\n

\n\nだれもが自分のコーディング・スタイル（書き方）をもっています。\nインデント、改行、空白（タブやスペース）は自由に使ってかまいません。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`### 1行ごとの解説\n\nこのコードを一部ずつ見ていきましょう。\n\n d3\n\nD3オブジェクトへの参照です。これでD3のメソッドにアクセスできます。\n\n .select(\"body\")\n\n\\`select()\\`の入力としてCSSセレクタを渡します。\nこの関数は、合致するDOMの最初の要素への参照を返します（複数の要素を取得したい場合は\\`selectAll()\\`を使います）。\nこのサンプルでは、ほしいのは __body__ で、__body__ への参照をチェインの次のメソッドへ受け渡します。\n\n .append(\"p\")\n\n\\`append()\\`は、指定した新しいDOM要素を作成し、作業しているセレクションの（内側の）最後に追加します。\nこのサンプルでは、 __body__ 内部に新しい __p__ を作ろうとしています。\n関数に入力にする引数として__\"p\"__を指定していますが、このメソッドは\\`select()\\`メソッドのチェインから引き継いだ__body__への参照も見ています。\n最終的に、\\`append()\\`は、作成した新しい要素への参照を次へ渡します。\n\n .text(\"あたらしいパラグラフ！\")\n\n\\`text()\\` は文字列を受け取り、現在選択している開始タグと終了タグの間に挿入します。\n一つ前のメソッドが新しい__p__の参照を渡しているため、このコードでは\\`

\\`と\\`

\\`の間に新しいテキストを挿入します（すでに内容が入っている場合、上書きされます）。\n\n ;\n\nセミコロンは重要でコードの終わりを示しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### バトンの受け渡し\n\n全てではありませんが多くのD3メソッドはセレクション（実際にはセレクションへの参照）を返します。\nこのことが、メソッド・チェインという手軽な技法を実現しています。\n一般的には、メソッドは実行したばかりの要素への参照を返しますが、常にそうとは限りません。\n\nそこでメソッドを連結するとき注意してほしいのは、順序です。\nひとつのメソッドの出力のタイプが、チェインのつぎのメソッドが想定する入力のタイプと一致させる必要があります。\nもし隣り合う入力と出力が一致しない場合、バトンの受け渡しが、中学校のリレー競走で落ちたバトンのようになってしまいます。\n\n関数が想定するタイプを知るには、APIリファレンスが役立ちます。\nリファレンスには、セレクションを返すかどうかなど、関数の詳細情報が掲載されています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`### チェインをほどく\n\nサンプルコードのチェインをほどいて次のように書くこともできます。\n\n

\nconst body = d3.select(\"body\");\nconst p = body.append(\"p\");\np.text(\"あたらしいパラグラフ！\");\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":37,"value":"md`つぎはデータのバインドです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"sytle = 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"