台部落ImagineCode

原创【D3.js - v5.x】（5）繪製力導向圖 | 附完整代碼

力導向圖力導向圖（Force-Directed Graph），是繪圖的一種算法。在二維或三維空間裏配置節點，節點之間用線連接，稱爲連線。各連線的長度幾乎相等，且儘可能不相交。節點和連線都被施加了力的作用，力是根據節點和連線的

2020-06-24 22:39:45

4

原创【D3.js - v5.x】（7）繪製地圖 | Geo佈局 | 完整代碼

地圖在數據可視化中，地圖是很重要的一部分。很多情況會與地圖有關聯，如中國各省的人口多少，GDP多少等，都可以和地圖聯繫在一起。地圖數據的獲取製作地圖需要 JSON 文件，將 JSON 的格式應用於地理上的文件，叫做 GeoJ

2020-04-28 19:33:40

13

原创【D3.js - v5.x】（6）繪製樹狀圖 | 層級佈局

樹狀圖在d3 中，繪製樹狀圖，要用到層級佈局這個概念： d3.hierarchy(data[, children]) 根據指定的層次結構數據構造一個根節點。指定的數據 data 必須爲一個表示根節點的對象。比如: { "n

2020-04-28 19:33:40

原创【D3.js - v5.x】（5）繪製力導向圖

力導向圖力導向圖（Force-Directed Graph），是繪圖的一種算法。在二維或三維空間裏配置節點，節點之間用線連接，稱爲連線。各連線的長度幾乎相等，且儘可能不相交。節點和連線都被施加了力的作用，力是根據節點和連線的

2020-04-28 19:33:40

7

原创【D3.js - v5.x】（4）繪製餅圖

餅圖 https://www.d3js.org.cn/document/d3-shape/#pies 定義一個佈局: var pie = d3.pie(); 返回值賦給變量 pie，此時 pie 可以當做函數使用。 var pi

2020-04-25 12:07:56

原创【D3.js - v5.x】（3）Update & Enter & Exit | 交互 | 佈局

Update、Enter、Exit Update、Enter、Exit 是 D3 中三個非常重要的概念，它處理的是當選擇集和數據的數量關係不確定的情況。什麼是 Update、Enter、Exit 假設，在 body 中有三個 p

2020-04-25 12:07:56

原创【D3.js - v5.x】（2）繪圖 | 比例尺 | 座標軸 | 柱狀圖

繪圖：以柱狀圖爲例要繪圖，首要需要的是一塊繪圖的“畫布”。 HTML 5 提供兩種強有力的“畫布”：SVG 和 Canvas。 SVG 是什麼 SVG，指可縮放矢量圖形（Scalable Vector Graphics），是用於

2020-04-21 07:57:46

原创【D3.js - v5.x】（1）選擇集 | 綁定數據 | 插入元素 | 刪除元素

選擇集使用 d3.select() 或 d3.selectAll() 選擇元素後返回的對象，就是選擇集。 D3 能夠連續不斷地調用函數，形如： d3.select().selectAll().text() 這稱爲鏈式語法，和 J

2020-04-21 07:57:46

原创【ThreeJs】（1）四大組件：場景、相機、物體、渲染器 | 創建一個矩形 | THREE腦圖

源碼地址 https://github.com/lvtraveler/threejsStart ThreeJS必不可少的四要素 <!DOCTYPE html> <html lang="en"> <head> <meta c

2019-12-03 06:02:52

原创【Vue】（3）生命週期鉤子函數 | 組件定義的方式 | 組件切換方式 | 父子組件之間傳值 | watch/methods/computed

Vue實例的生命週期生命週期：從Vue實例創建、運行、到銷燬期間，總是伴隨着各種各樣的事件，這些事件，統稱生命週期生命hz週期鉤子：生命週期事件的別名而已組件創建期間的4個鉤子函數 beforeCreate：實例剛在內

2019-10-26 09:57:28

原创【Vue】（2）基礎知識 | 過濾器 | 指令

2019-09-16 08:15:46

原创【前端三分鐘】優化判斷語句

在之前的文章中曾經介紹過ES6的Map,並給出如何使用Map替換if-else語句的，但那篇文章中只是簡單介紹。這篇文章會對判斷語句的優化進行進一步的介紹。 if-else let status = 0; if(status =

2019-07-30 07:23:33

1

57

原创【D3.js - v5.x】（5）繪製力導向圖 | 附完整代碼

原创【D3.js - v5.x】（7）繪製地圖 | Geo佈局 | 完整代碼

原创【D3.js - v5.x】（6）繪製樹狀圖 | 層級佈局

原创【D3.js - v5.x】（5）繪製力導向圖

原创【D3.js - v5.x】（4）繪製餅圖

原创【D3.js - v5.x】（3）Update & Enter & Exit | 交互 | 佈局

原创【D3.js - v5.x】（2）繪圖 | 比例尺 | 座標軸 | 柱狀圖

原创【D3.js - v5.x】（1）選擇集 | 綁定數據 | 插入元素 | 刪除元素

原创【ThreeJs】（1）四大組件：場景、相機、物體、渲染器 | 創建一個矩形 | THREE腦圖

原创【Vue】（3）生命週期鉤子函數 | 組件定義的方式 | 組件切換方式 | 父子組件之間傳值 | watch/methods/computed

原创【Vue】（2）基礎知識 | 過濾器 | 指令

原创【前端三分鐘】優化判斷語句

原创【Vue】（1）基礎知識 | MVVM | 基礎指令 | v-model | v-for | v-if | v-show | 實例

原创【ChromeDevTool】Performace的簡單使用

原创【CSS】Grid 柵格佈局 | 更新中...跨行/跨列