《D3.js資料可視化實戰手冊》——2.6 函數級聯調用

本節書摘來異步社群《d3.js資料可視化實戰手冊》一書中的第2章，第2.6節，作者： 【加拿大】nick qi zhu，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

到現在為止，我們看到的d3 api都展現了函數級聯調用的思想。是以它接近于形成了一個可以動态建構html/svg的領域特定語言（domain specific language）。在接下來的例子中，我們将看到如何隻使用d3來生成前一個例子的頁面結構。

提示.tif 如果對dsl不熟悉，推薦閱讀martin fowler在領域特定語言（domain-specific languages）一書中的相關解釋，參見<code>http://www.informit.com/articles/article.aspx?p=1592379</code>。

在浏覽器中打開如下檔案的本地副本。

接下來我們将展示如何用簡潔可讀的函數級聯調用生成動态圖形。

上述代碼生成如下視覺效果（和之前章節效果類似）。

盡管和之前的效果很類似，但本例中對dom元素的構造過程卻完全不同。如代碼所示，本例中頁面上并沒有任何靜态html元素，而之前的例子中，section和div元素都是事先存在的。

讓我們進一步研究一下這些元素是如何被動态建立的。在行a中，我們先選取了頂層的body元素。然後用一個臨時變量body來緩存該選集結果。而後行b在body元素内追加一個新的元素section。由于append函數傳回了一個包含新添加元素的選集，是以在行c中就可以為這個新建立的section元素的id屬性指派，這裡它的值為section1。行d為#section1附加了一個新建立的div元素，并且在行e中設定css class為blue box。随後，類似地，我們在行f中往這個div元素上附加一個段落元素，并在行g中設定其文本内容為dynamic blue box。

如上所述，這種級聯處理可以繼續生成任意複雜的結構。事實上，典型的基于d3的資料可視化結構正是這樣建立的。許多可視化項目都隻簡單包含一個html骨架，然後用d3來建立剩餘部分。如果想要熟練運用d3庫，掌握這種函數級聯調用的方式是必不可少的。

技巧.tif 部分d3修飾函數會傳回一個新的選集，例如select、append、insert函數。建議用縮進來差別應用于不同選集上的級聯函數，這是個不錯的實踐方式。