以上是效果圖，本圖表使用d3.js v4制作。圖表主要功能是在六邊形格子中顯示數據，點擊底部圖標可以切換指定格子高亮顯示，圖表可以隨瀏覽器任意縮放。 1.圖表的主體結構是由正六邊形組成，使用d3生成六邊形可以使用d3-hexbin.js，生成六邊形比較方便，只要給定中心點坐標和半徑 ...

D3 提供了 4 個方法用於實現圖形的過渡： - transition() 啟動過渡效果，其前后是圖形變化前后的狀態（形狀、位置、顏色等等），例如： D3 會自動對兩種顏色（紅色和藍色）之間的顏色值（RGB值）進行插值計算，得到過渡用的顏色值。 - duration ...

一款酷炫的前端動態頁面 廢話不多說 ，分享一款酷炫的頁面動態背景 效果見下圖。 查看 demo 背景圖效果： 實例效果 點擊效果： 背景 ...

柱形圖是一種最簡單的可視化圖標，主要有矩形、文字標簽、坐標軸組成。 本文為簡單起見，只繪制矩形的部分，用以講解如何使用 D3 在 SVG 畫布中繪圖。 一、 畫布是什么 　　前幾章的處理對象都是 HTML 的文字，沒有涉及圖形的制作。 　　要繪圖，首要需要的是一塊繪圖 ...

由於最近工作不是很忙，隧由把之前的charts項目用d3.js重寫的一下，其實d3.js文檔很多，但是入門不是很難，可是想真的能做一個完成的，交互良好的圖還是要下一番功夫的。今天在echarts找到了一個柱狀圖，如圖。 模仿了一番，廢話不多說。下面就開始我們的代碼（注意是D3.v4版本 ...

今天我們來仿echarts折線圖,這個圖在echarts是折線圖堆疊，但是我用d3改造成了普通的折線圖，只為了大家學習（其實在簡單的寫一個布局就可以）。廢話不多說商行代碼。 1 制作 Line 類 2 css 文件 3 HTML 文件 ...

前段時間需要使用免費的圖表工具做報表，同事提及了一款圖表工具morris。官方網站： http://www.oesmith.co.uk/morris.js/ 該插件遵循BSD協議，可以用於商業軟件，也可以進行修改，相對比較寬松。目前插件版本0.4.3，感覺好像 ...

Vue 炫酷 Echarts 圖表 網址：https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all 這上邊還是有很多設計炫酷的 echarts 圖表的，可以做大屏的時候使用。簡單的寫幾個案例，可以根據自己的需要 ...