頁面生成柱狀圖 --- D3.js

時間 2020-07-20

原文原文鏈接

轉載自：https://www.cnblogs.com/fastmover/p/7779660.html

D3.js從入門到「放棄」指南

前言

近期略有點諸事不順，趁略有閒餘之時，玩起D3.js。以前實際項目中主要是用各類chart如hightchart、echarts等，這些圖形庫玩起來貌都是完美的，一切皆可配置，但幾年前接觸了D3以後，以爲前面那chart類庫侷限的地方在於，基本不可定製；而D3呢，你說了算，你想畫出什麼樣的圖，你說了算，自由度很大，當時就有點膜拜和仰慕，小打小鬧的玩了幾下，沒有沉下心來專心去玩，當時以爲真的很難。不理解，也看不進去。javascript

後面由於接觸了react、redux，接觸了函數式編程。再回過頭來重新搗鼓起D3來，感受沒那麼困難了，D3其實也有點函數式編程的思路。別被標題嚇跑哈，腳踏實地加點毅力D3應該也是能夠上手的。html

費話很少說，先上一張讓你逆天的數據可視化的效果圖，點我查看在線效果java

D3.js基礎

瞭解SVG圖做圖
爲何要學習SVG圖呢？由於D3.js堪稱SVG中的jQuery，固然你若是想用D3輸出Canvas圖也能夠，但SVG圖操做起來更加靈活，更加方便調試，在Chrome中調試可讓你飛起來。react
學習D3.js的語法
語法是必需的，建議自行去官網上學習其語法，或者借/買一本書來同步學習，先嚐試實現簡單的圖形，若是能夠的話最好了解一下函數式編程的curry與compose思想，不建議一開始就去接觸高大上的衆多在線Demo，這樣會容易讓你誤入深淵不能自拔，真的就從入門到放棄。git

學習D3.js的編程思路

1）語法其實能夠體現其編程思路，起步固然是學習其強大的選擇器，下面感受一下github

d3.select("body").style("background-color", "black"); // 直接選擇 ->並設置屬性 d3.selectAll("p").style("color", function() { // 選擇 -> 動態設置屬性 return "hsl(" + Math.random() * 360 + ",100%,50%)"; }); d3.selectAll("p") // 選擇 -> 綁定數據 -> 動態設置屬性 .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) { return d + "px"; });

2）接着是理解 Update，Enter 和 Exit 的思路編程

// Update… var p = d3.select("body") // 直接把數據綁定到Dom並輸出，數組元素個數與p節點的個數一致就所有更新文本，若是不一致，就只更新現有p節點的文本，多餘的數據會被保存起來，看下面會用到 .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d) { return d; }); // Enter…[經常使用] p.enter().append("p") // 若是不一致，數組元素個數比p節點多，就插入p節點補足並相應更新文本 .text(function(d) { return d; }); // Exit…[經常使用] p.exit().remove(); // 若是不一致，數組元素個數比p節點少，就刪除多餘的p節點

3) 而後要學習D3的畫圖通常思路，好比要畫一個線狀圖，那麼咱們：redux

把輸入的原始數據轉化成爲標準的D3可接受的數據格式 -> 根據原始數據定義好x軸函數、y軸函數和定義好做圖方式(如d3.line) -> 在SVG上面畫出x軸y軸、根據原始數據結合x軸及y軸函數做線狀圖 -> 再畫出標題等細節的東西數組

4) 最後，給已經完成的圖形添加動畫效果app

沒有動畫效果的圖形看上去會比較乏味。動畫基本寫法以下：

// 把全部圓圈改變半徑 d3.selectAll("circle").transition() // 定義動畫 .duration(750) // 動畫持續時間 .delay(function(d, i) { return i * 10; }) // 元素動畫要延時多少時間開始 .attr("r", function(d) { return Math.sqrt(d * scale); }); // 設置最後效果