--- ### 老闆扣汀 週四寫程式0608 # 來做資料視覺化的動態長條圖吧！ --- 如何在網頁上製作圖表呢？ 資料視覺化是現在網頁常用的媒材， 但選擇框架時各有優缺點， --- 這次直播中，會討論並示範基礎長條圖製作， 比較在Jquery / Vue / D3三種框架下， 實作互動長條圖的方法！ --- ### Jquery ##### [ Dom操作與資料處理 ] #### 概念：手動，土炮，自立自強 https://codepen.io/frank890417/pen/pwjKNR --- ### Vue ##### [ 計算資料，自動指定，自動產生 ] #### 概念：資料對應狀態，不額外修改 https://codepen.io/frank890417/pen/WOQyKp?editors=0010 ---- ```javascript= var vm = new Vue({ el: "#app", data: { datas: datas }, methods:{ gen_style(now_data){ return {"height": now_data*20+"px", "backgroundColor": "rgb("+now_data*10+","+now_data*10+","+now_data*10+")"}; } } }); ``` ---- ### Vue data/computed與watch --- ### D3 ##### [ 操作DOM（比較高級的版本），有些不錯的函數 ] #### 概念：一個蘿菠一個坑，一筆資料一個元素 https://codepen.io/frank890417/pen/XgmBbo?editors=0011 ---- #### 選擇所有項目 selectAll ---- #### 綁定資料 .data(datas) ---- #### 針對進入資料加元件 .enter().append("div") ---- #### 設定屬性 .attr / .style (function or value) ---- #### 數值轉換 scaleLinear --- 比較複雜的結合案例： https://codepen.io/frank890417/pen/eRpzaY ----