將資料依年份分開呈現,中間使用 transition 並且更新 x, y 軸
This file has been truncated, but you can view the full file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
改成像是線上人數的圖表,不同顏色表示不同裝置
遇到的問題:客製化 transition 還是沒完全掌握,不知道如何把很多種 transition 組合在一起
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 彈回去
學習 mouse event 及 attrTween
遇到的問題:d3.interpolate 還是不懂運作的原理與作用
學習 pie, arc。嘗試使用 arc.centroid 把數字放在圖形上。
嘗試隨著資料內容變動,也同步更新 y 軸,但並沒有圖表更好,只是練習操作
NewerOlder