iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 2874 瀏覽

鐵人賽 Modern Web DAY 28

React + D3 的正確姿勢系列第 28 篇

技術 Day28-React + D3（一）

前言前面的文章都介紹完圖表的繪製後，今天終於要回歸主題，把 D3 跟 React 結合在一起了，今天跟明天的文章都會把以前所講的內容做一個統整，假如對 Rea...

陳奕帆 Andy Chen ‧ 2019-10-14

1 Like 0 留言 5298 瀏覽

鐵人賽 Modern Web DAY 29

JavaScript 原力覺醒 - 成為絕地武士之路系列第 29 篇

技術 JS 原力覺醒 Day29 - Set / Map

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-14 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 5047 瀏覽

鐵人賽 Modern Web DAY 28

JavaScript 原力覺醒 - 成為絕地武士之路系列第 28 篇

技術 JS 原力覺醒 Day28 - JS 裡的資料結構

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-13 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 1 留言 3621 瀏覽

鐵人賽 Modern Web DAY 27

React + D3 的正確姿勢系列第 27 篇

技術 Day27-bubble chart(using D3.js)

前言今天要來介紹本系列文最後一個圖表了，由於鐵人賽時間真的很有限沒辦法介紹全部的圖表，但筆者已經盡量把最常用的幾種圖表都介紹給大家了，相信大家學會這幾種圖表一...

陳奕帆 Andy Chen ‧ 2019-10-13

1 Like 0 留言 5023 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 47 篇

技術 Day 47. 通用武裝・泛型應用 X 結合 ES2015+ - TypeScript Generics with ES2015+ Features

閱讀本篇文章前，仔細想想看迭代器（Iterator）與聚合物（Collection）的差別在哪？迭代器模式要如何實踐？實踐的目的為何？什麼是多型巡訪...

Maxwell Alexius ‧ 2020-01-09

3 Like 0 留言 13642 瀏覽

鐵人賽 Modern Web DAY 27

JavaScript 原力覺醒 - 成為絕地武士之路系列第 27 篇

技術 JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-12 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 4293 瀏覽

鐵人賽 Modern Web DAY 26

React + D3 的正確姿勢系列第 26 篇

技術 Day26-donut chart(using D3.js)

前言昨天的文章介紹了圓餅圖，今天要來介紹圓餅圖的變形版：環圈圖，其實筆者自己比較少用圓餅圖，只要是這種要計算數據比例的統計圖現在都改用環圈圖了，至於為什麼會有...

陳奕帆 Andy Chen ‧ 2019-10-12

1 Like 0 留言 4980 瀏覽

鐵人賽 Modern Web DAY 26

JavaScript 原力覺醒 - 成為絕地武士之路系列第 26 篇

技術 JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-11 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 6104 瀏覽

鐵人賽 Modern Web DAY 25

React + D3 的正確姿勢系列第 25 篇

技術 Day25-pie chart(using D3.js)

前言今天要來介紹一個比較特別的圖表，在前天的文章提到長條圖，用來反映事物分布、集中情況，昨天的文章提到折線圖，用來顯示數據的變化趨勢，但是這些都無法得知單一數...

陳奕帆 Andy Chen ‧ 2019-10-11

0 Like 0 留言 5802 瀏覽

鐵人賽 Modern Web DAY 24

React + D3 的正確姿勢系列第 24 篇

技術 Day24-line chart(using D3.js)

前言在講完長條圖之後接下來要介紹的是折線圖，折線圖也是視覺化中非常重要且基礎的一種圖表，廢話不多說馬上開始今天的文章吧！折線圖折線圖是用直線段將各數據點連...

陳奕帆 Andy Chen ‧ 2019-10-10

1 Like 1 留言 4854 瀏覽

鐵人賽 Modern Web DAY 25

JavaScript 原力覺醒 - 成為絕地武士之路系列第 25 篇

技術 JS 原力覺醒 Day25 - CRP : 關鍵渲染路徑

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-10 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 5835 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 44 篇

技術 Day 44. 通用武裝・介面與類別 X 泛型註記機制 - TypeScript Generic Class & Interface

閱讀本篇文章前，仔細想想看泛用型別化名的如何進行宣告？泛用化名註記在變數時的注意事項為何？泛用函式的特點為何？如果還不清楚可以看一下前一篇文章喔...

Maxwell Alexius ‧ 2019-10-25

1 Like 0 留言 2154 瀏覽

鐵人賽 Modern Web DAY 23

React + D3 的正確姿勢系列第 23 篇

技術 Day23-multi bar chart(using D3.js)

前言昨天的文章講完如何繪製長條圖後，今天要來講點進階版的長條圖了，其實說進階也沒到多進階就只是讓同一個 band 可以多畫一些 rect 出來形成多重長條圖而...

陳奕帆 Andy Chen ‧ 2019-10-09

1 Like 0 留言 3159 瀏覽

鐵人賽 Modern Web DAY 24

JavaScript 原力覺醒 - 成為絕地武士之路系列第 24 篇

技術 JS 原力覺醒 Day24 - DOM

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-09 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

2 Like 0 留言 3991 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 43 篇

技術 Day 43. 通用武裝・泛型註記 X 推論未來 - TypeScript Generic Declaration & Annotation

閱讀本篇文章前，仔細想想看泛用型別的意義是什麼？泛用型別大致上有哪些種類或形式？如果還不清楚可以看一下前一篇文章喔～以下就直接正文開始～泛用...

Maxwell Alexius ‧ 2019-10-23

0 Like 0 留言 5296 瀏覽

鐵人賽 Modern Web DAY 24

一步步帶你了解 AWS & LINE API 並使用 Serverless 介接的各種應用系列第 24 篇

技術 Day 24 - 簡單使用 LINE LIFF API

前言以下就為大家帶來簡單的實作以及如何去使用它。實作在views/下新增一個liff_test.html並加入以下內容 <html> &l...

NiJia ‧ 2019-10-09 ‧團隊HSCA x CHATBOT x SERVERLESS

1 Like 0 留言 2804 瀏覽

鐵人賽 Modern Web DAY 23

JavaScript 原力覺醒 - 成為絕地武士之路系列第 23 篇

技術 JS 原力覺醒 Day23 - Class 語法糖

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-08 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 3450 瀏覽

鐵人賽 Modern Web DAY 22

React + D3 的正確姿勢系列第 22 篇

技術 Day22-bar chart(using D3.js)

前言從今天開始的文章就正式進入實作的過程啦~ 這次的系列文預計會帶給大家 5 種不一樣的圖表，視覺化是個非常深奧的世界，筆者我也只會一點皮毛而已XD 所以這次...

陳奕帆 Andy Chen ‧ 2019-10-08

1 Like 0 留言 5645 瀏覽

鐵人賽 Modern Web DAY 21

React + D3 的正確姿勢系列第 21 篇

技術 Day21-D3基本介紹(transform)

前言今天的內容會比較輕鬆一些，前幾天的文章內容可能有點太多而且不太好消化，所以今天筆者就打算講一點輕鬆的內容，但這個內容也是非常重要的，想要把一張圖表繪製好這...

陳奕帆 Andy Chen ‧ 2019-10-07

1 Like 0 留言 2283 瀏覽

鐵人賽 Modern Web DAY 22

JavaScript 原力覺醒 - 成為絕地武士之路系列第 22 篇

技術 JS 原力覺醒 Day22 - 原型共享與原型繼承

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-07 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 4635 瀏覽

鐵人賽 Modern Web DAY 20

React + D3 的正確姿勢系列第 20 篇

技術 Day20-D3基本介紹(chart event、tooltip)

前言在講完所有的圖表設定後，今天要來介紹如何讓我們設計好的圖表可以跟使用者進行互動，為了要讓圖表能進行互動我們就必須要將圖表設定一些 event ，這樣使用者...

陳奕帆 Andy Chen ‧ 2019-10-06

1 Like 0 留言 2566 瀏覽

鐵人賽 Modern Web DAY 21

JavaScript 原力覺醒 - 成為絕地武士之路系列第 21 篇

技術 JS 原力覺醒 Day21 - 原型

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-06 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 3757 瀏覽

鐵人賽 Modern Web DAY 19

React + D3 的正確姿勢系列第 19 篇

技術 Day19-D3基本介紹(Axis)

前言在昨天的文章講完如何傳資料進去圖表後，今天要來介紹另一個重要的觀念： Axis 了，其實 Axis 代表的就是座標軸上的設定，透過客製化調整 Axis 的...

陳奕帆 Andy Chen ‧ 2019-10-05

1 Like 0 留言 1854 瀏覽

鐵人賽 Modern Web DAY 20

JavaScript 原力覺醒 - 成為絕地武士之路系列第 20 篇

技術 JS 原力覺醒 Day20 - 物件

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-05 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 2595 瀏覽

鐵人賽 Modern Web DAY 18

React + D3 的正確姿勢系列第 18 篇

技術 Day18-D3基本介紹(data)

前言在昨天的文章講完如何先初始化一個 svg 容器來填入圖表後，今天要來介紹如何把資料傳進去 svg 內進行圖表繪製嘍！ selectAll 昨天介紹了 d3...

陳奕帆 Andy Chen ‧ 2019-10-04

1 Like 0 留言 3826 瀏覽

鐵人賽 Modern Web DAY 19

JavaScript 原力覺醒 - 成為絕地武士之路系列第 19 篇

技術 JS 原力覺醒 Day19 - 一級函式與高階函式

今天要提到的是讓 JS 很適合用來撰寫 Functional Programming 的兩個特性的名詞解釋：「一級函式」與「高階函式」，如果你寫 JS 一段時...

Spark ‧ 2019-10-04 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

1 Like 0 留言 5663 瀏覽

鐵人賽 Modern Web DAY 17

React + D3 的正確姿勢系列第 17 篇

技術 Day17-D3基本介紹(select、append、attr)

前言從今天開始的文章就正式進入 D3 的圖表繪製設定了，光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ，總之接下來的文...

陳奕帆 Andy Chen ‧ 2019-10-03

1 Like 0 留言 4614 瀏覽

鐵人賽 Modern Web DAY 18

JavaScript 原力覺醒 - 成為絕地武士之路系列第 18 篇

技術 JS 原力覺醒 Day18 - Functional Programming

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-03 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

0 Like 0 留言 3393 瀏覽

鐵人賽 Modern Web DAY 16

React + D3 的正確姿勢系列第 16 篇

技術 Day16-D3基本介紹(number format)

前言今天的文章跟昨天的內容基本上差不多，今天要來講講 D3 是如何處理數字格式，其實數字是不需要經由 D3 去轉換也可以直接使用 d3.scaleLinear...

陳奕帆 Andy Chen ‧ 2019-10-02

1 Like 1 留言 2741 瀏覽

鐵人賽 Modern Web DAY 17

JavaScript 原力覺醒 - 成為絕地武士之路系列第 17 篇

技術 JS 原力覺醒 Day17 - this 的四種繫結

一路上感謝各位讀者們的支持和回饋。本 30 天系列文目前已經將篇幅重新整理、編纂成冊。《JavaScript 概念三明治》在天瓏書局上架囉！喜歡這個系列，想閱...

Spark ‧ 2019-10-02 ‧團隊G8 Hash - c98b82371573afc08575815d90f5eac4

技術 Day28-React + D3（一）

技術 JS 原力覺醒 Day29 - Set / Map

技術 JS 原力覺醒 Day28 - JS 裡的資料結構

技術 Day27-bubble chart(using D3.js)

技術 Day 47. 通用武裝・泛型應用 X 結合 ES2015+ - TypeScript Generics with ES2015+ Features

技術 JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty

技術 Day26-donut chart(using D3.js)

技術 JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval

技術 Day25-pie chart(using D3.js)

技術 Day24-line chart(using D3.js)

技術 JS 原力覺醒 Day25 - CRP : 關鍵渲染路徑

技術 Day 44. 通用武裝・介面與類別 X 泛型註記機制 - TypeScript Generic Class & Interface

技術 Day23-multi bar chart(using D3.js)

技術 JS 原力覺醒 Day24 - DOM

技術 Day 43. 通用武裝・泛型註記 X 推論未來 - TypeScript Generic Declaration & Annotation

技術 Day 24 - 簡單使用 LINE LIFF API

技術 JS 原力覺醒 Day23 - Class 語法糖

技術 Day22-bar chart(using D3.js)

技術 Day21-D3基本介紹(transform)

技術 JS 原力覺醒 Day22 - 原型共享與原型繼承

技術 Day20-D3基本介紹(chart event、tooltip)

技術 JS 原力覺醒 Day21 - 原型

技術 Day19-D3基本介紹(Axis)

技術 JS 原力覺醒 Day20 - 物件

技術 Day18-D3基本介紹(data)

技術 JS 原力覺醒 Day19 - 一級函式與高階函式

技術 Day17-D3基本介紹(select、append、attr)

技術 JS 原力覺醒 Day18 - Functional Programming

技術 Day16-D3基本介紹(number format)

技術 JS 原力覺醒 Day17 - this 的四種繫結

標記使用者