Update

Shyam-Chen · Dec 30, 2019 · 7e5475b · 7e5475b
1 parent ac600e2
commit 7e5475b
Show file tree

Hide file tree

Showing 12 changed files with 365 additions and 1,394 deletions.
diff --git a/ECMAScript/Coding-Style.md b/ECMAScript/Coding-Style.md
diff --git a/HTML5/Graphics.md → HTML5/2D-Graphics.md b/HTML5/Graphics.md → HTML5/2D-Graphics.md
@@ -1,9 +1,10 @@
-# Graphics
+# 2D Graphics
 
 ### Reference Resources (參考資源)
 
 * https://developer.mozilla.org/en-US/docs/Web/SVG
 * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
+* https://github.com/d3/d3
 
 ***
 
@@ -42,6 +43,62 @@
   * [Text (文字)](#text-文字)
   * [Image (圖像)](#image-圖像)
   * Pattern (圖案)
+* [D3 (Data-Driven Documents)](#d3)
+  * [Components (元件)](#components-元件)
+    * [Selection (選擇) `d3-selection`](#選擇)
+    * Animation (動畫) `d3-ease`
+    * Transition (漸變) `d3-transition`
+    * Color (顏色) `d3-color`
+    * Arrays (陣列) `d3-array`
+    * 亂數 `d3-random`
+    * 請求 `d3-request`
+    * Queue (佇列) `d3-queue`
+    * Format (格式化) `d3-format`
+    * Localization (本地化) `d3-time-format`
+    * Interpolate (插值) `d3-interpolate`
+  * SVG
+    * 形狀 `d3-shape`
+      * 弧
+      * 餅
+      * 線
+      * 面積
+      * 曲線
+      * 鏈接
+      * 符號
+      * 堆疊
+    * 弦 `d3-chord`
+    * 軸 `d3-axis`
+    * 刷子 `d3-brush`
+  * Canvas
+    * 路徑 `d3-path`
+  * 集合 `d3-collection`
+    * 物件
+    * Map
+    * Set
+    * 巢狀
+  * 比例尺 `d3-scale`
+  * Time 時間 `d3-time`
+    * Timer (計時器) `d3-timer`
+  * Layout (版面)
+    * Forces (力量) `d3-force`
+    * Hierarchies (層次結構) `d3-hierarchy`
+  * 地理 `d3-geo`
+    * 路徑
+    * 球形形狀
+    * 球面運算
+    * 投影
+    * 變形
+    * 流
+  * 幾何
+    * 四叉樹 `d3-quadtree`
+    * 多邊形 `d3-polygon`
+    * 沃羅諾伊圖 `d3-voronoi`
+  * 行為
+    * 拖曳 `d3-drag`
+    * 縮放 `d3-zoom`
+  * Utility (公用)
+    * Dispatches (調度) `d3-dispatch`
+    * Delimiter-separated Values `d3-dsv`
 
 ***
 
@@ -1184,3 +1241,286 @@ https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
 
 #### Canvas
+
+***
+
+## D3
+
+## Components (元件)
+
+```js
+import { Observable } from 'rxjs/Observable';
+
+import { fromEvent } from 'rxjs/observable/fromEvent';
+
+import { select } from 'd3-selection';
+import { transition } from 'd3-transition';
+
+Observable::fromEvent(document, 'click')
+  .subscribe(() => {
+    const exEl = select('#ex');
+
+    exEl.text('Hello!')
+      .style('text-align', 'center')
+      .style('line-height', '10rem')
+      .style('font-size', '7rem')
+      ::transition()
+      .duration(500)
+      .style('color', '#F44336');
+  });
+```
+
+```html
+<span id="ex"></span>
+```
+
+### 圓餅圖
+
+#### SVG 版
+
+#### Canvas 版
+
+```js
+import { select } from 'd3-selection';
+import { scaleLinear } from 'd3-scale';
+
+const exEl = select('#ex');
+
+const chart = exEl.append('canvas')
+  .attr('width', 'auto')
+  .attr('height', 'auto');
+
+const context = chart.node().getContext('2d');
+
+const scale = scaleLinear()
+  .range([10, 200])
+  .domain([1, 10]);
+
+[1, 2, 3, 5, 8].forEach((d) => {
+  context.beginPath();
+  context.rect(scale(d), 5, 10, 10);
+  context.fillStyle = '#F44336';
+  context.fill();
+  context.closePath();
+});
+```
+
+```html
+<span id="ex"></span>
+```
+
+### 選擇
+
+```js
+import { select } from 'd3-selection';
+
+select('li');  // 選擇第一個 <li></li>
+select('#ex');
+select('.ex');
+```
+
+```js
+import { selectAll } from 'd3-selection';
+
+selectAll('li');  // 選擇所有 <li></li>
+```
+
+設定標籤屬性
+
+```js
+import { select } from 'd3-selection';
+
+select('#ex').append('svg')
+  .append('svg:rect')
+  .attr('x', 10)
+  .attr('y', 10)
+  .attr('width', 100)
+  .attr('height', 40)
+  .attr('fill', '#F44336');
+```
+
+```html
+<div id="ex"></div>
+```
+
+一次設定多個標籤屬性
+
+```js
+import { select } from 'd3-selection';
+import 'd3-selection-multi';
+
+select('#ex').append('svg')
+  .append('svg:rect')
+  .attrs({
+    x: 10,
+    y: 10,
+    width: 100,
+    height: 40,
+    fill: '#F44336'
+  });
+```
+
+設定樣式類別
+
+```js
+// TODO
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.classed();
+```
+
+設定行內樣式
+
+```js
+import { select } from 'd3-selection';
+
+select('#ex').append('svg')
+  .append('svg:rect')
+  .attrs({ x: 10, y: 10, width: 100, height: 40, fill: '#F44336' })
+  .style('stroke', '#B71C1C')
+  .style('stroke-width', 5);
+```
+
+設定多個行內樣式
+
+```js
+import { select } from 'd3-selection';
+import 'd3-selection-multi';
+
+select('#ex').append('svg')
+  .append('svg:rect')
+  .attrs({ x: 10, y: 10, width: 100, height: 40, fill: '#F44336' })
+  .styles({
+    stroke: '#B71C1C',
+    'stroke-width': 5
+  });
+```
+
+設定特殊屬性
+
+```js
+import { select } from 'd3-selection';
+
+select('#ex').property('value', 'D3');
+```
+
+```html
+<input type="text" id="ex">
+```
+
+設定文字
+
+```js
+import { select } from 'd3-selection';
+
+select('#ex').text('D3');
+```
+
+設定標籤
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.html('')
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.append('h3').text('D3');
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.insert('')
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.remove('')
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.data('')
+```
+
+整合 Immutable
+
+```js
+import { select, selectAll } from 'd3-selection';
+import { Set } from 'immutable';
+
+const el = select('#ex');
+const matrix = Set([1, 2, 3]);
+
+el.append('ul')
+  ::selectAll('li')
+  .data(matrix)
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.enter('')
+```
+
+```js
+import { select } from 'd3-selection';
+
+const el = select('#ex');
+
+el.exit('')
+```
+
+```js
+import { selectAll } from 'd3-selection';
+
+const list = selectAll('li');
+
+list.filter((value, index) => index % 2 === 0)
+  .style('color', '#F44336');
+```
+
+```js
+import { select } from 'd3-selection';
+
+let exWidth = 400;
+let exHeight = 200;
+
+const exDataset = [5, 10, 15, 20, 15, 10, 15, 20, 15, 10, 5];
+
+const exSvgEl = select('#ex')
+  .append('svg')
+  .attr('width', exWidth)
+  .attr('height', exHeight);
+
+exSvgEl.selectAll('rect')
+  .data(exDataset)
+  .enter()
+  .append('rect')
+  .attr('x', (data, index) => index * (exWidth / exDataset.length))
+  .attr('fill', data => `rgba(200, 100, 200, ${data / 25})`)
+  .attr('y', data => exHeight - (data * 4))
+  .attr('width', exWidth / exDataset.length - 1)
+  .attr('height', data => data * 4);
+```
+
+### 漸變
diff --git a/HTML5/Three.md → HTML5/3D-Graphics.md b/HTML5/Three.md → HTML5/3D-Graphics.md
@@ -1,4 +1,4 @@
-# Three
+# 3D Graphics
 
 ### Reference Resources (參考資源)
 
@@ -12,11 +12,13 @@
 
 ### Table of Contents (目錄)
 
-* Components (元件)
-* Material (材質)
-* Light (光源)
-* Geometry (幾何體)
-* Particle (粒子)
+* WebGL
+* Three
+  * Components (元件)
+  * Material (材質)
+  * Light (光源)
+  * Geometry (幾何體)
+  * Particle (粒子)
 
 ***