Zoomable Treemap 學習
遇到的問題:程式碼中的 treemap 根本沒用到啊?所以這是自己硬刻出來的吧?
webpackJsonp([16,17],[ | |
/* 0 */ | |
/***/ (function(module, __webpack_exports__, __webpack_require__) { | |
"use strict"; | |
/* WEBPACK VAR INJECTION */(function(global) {Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); | |
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(36); | |
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_Observable__ = __webpack_require__(4); | |
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_Observable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_Observable__); | |
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_observable_merge__ = __webpack_require__(646); |
Zoomable Treemap 學習
遇到的問題:程式碼中的 treemap 根本沒用到啊?所以這是自己硬刻出來的吧?
學習 treemap
遇到的問題:我改不動 mouseover 使區塊變色,mouseover 後 d3.select(this).style("background", anotherColor) 沒作用?
了解 force layout node 及 link 操作
將原本寫死的三個動作,變成可以自由新增 node 與 link
學習 force layout 及 transition
遇到的問題:不知道是不是 bug,當 node fixed 的時候且每個 node 的 x,y 都靜止不變後,double click node 並不會讓 node 彈回去
改成像是線上人數的圖表,不同顏色表示不同裝置
遇到的問題:客製化 transition 還是沒完全掌握,不知道如何把很多種 transition 組合在一起
將資料依年份分開呈現,中間使用 transition 並且更新 x, y 軸
學習 mouse event 及 attrTween
遇到的問題:d3.interpolate 還是不懂運作的原理與作用
學習 pie, arc。嘗試使用 arc.centroid 把數字放在圖形上。
嘗試隨著資料內容變動,也同步更新 y 軸,但並沒有圖表更好,只是練習操作