1. 程式人生 > >d3.js(v5.7)的node與資料匹配(自動匹配擴充套件函式)

d3.js(v5.7)的node與資料匹配(自動匹配擴充套件函式)

在d3操作時,當然少不了對已有節點繫結資料,那麼問題就來了,節點個數和資料長度不一樣的,怎麼辦。

d3在節點少於資料長度的時候,有enter().appen()方法實現node的增加;

在節點大於資料長度的時候,有exit().remove()實現對多餘節點的刪除;

但是,操作是這樣的:

image.png

有沒有感覺很無奈,難道寫的時候還要人為判斷節點的個數與資料量之間的關係麼?那還要電腦幹嘛,還要程式幹嘛?

說幹就幹,於是就封裝了一個節點、資料自動匹配的函式-----automatch():

image.png

用的時候呢,直接這麼用:

首先7個節點,5個數據項

image.png

image.png

頁面最終輸出:

image.png

再來試試0個節點,5個數據:

image.png

image.png

頁面最終:

image.png