D3.JS 長條圖範例

D3 是客製化的圖表加上動態的生動的圖表，讓人更賞心稅目，但也聽說入手不易，常常搞不懂有哪些API 可以使用，官方文件有些難閱讀等等，線上總是有很多高手有提供範利，其中我也是以新手的身份來掀開d3這神祕的面紗吧! 參考範例來源

https://gist.github.com/kurotanshi/949bc9cc6e53a2518bdedb438be0de79 

一、 引用d3的js 要引用d3要注意版本喔，不一定相容舊的版本… 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

二、 新增svg的畫布

 <div id="content">
   <svg class="svg"></svg>
</div>

 三、 資料收集 (要用json格式，才可以用在d3的圖表上) 

 

 var data = [

  {

    "region": "台北",

    "unit": 46.40977922,

    "price": 91086.0211,

    "unit_price": 2570.210781

  },

  {

    "region": "高雄",

    "unit": 32.4142328,

    "price": 63651.00159,

    "unit_price": 2173.609712

  },

  {

    "region": "台中",

    "unit": 29.51372024,

    "price": 69658.03571,

    "unit_price": 2125.218562

  },

  {

    "region": "彰化",

    "unit": 34.4416108,

    "price": 73852.80682,

    "unit_price": 1970.313951

  },

  {

    "region": "南投",

    "unit": 26.92638889,

    "price": 48446.94739,

    "unit_price": 1893.854422

  },

  {

    "region": "新竹",

    "unit": 43.1695172,

    "price": 85949.14021,

    "unit_price": 1813.571443

  },

  {

    "region": "花蓮",

    "unit": 31.25626667,

    "price": 50813.33333,

    "unit_price": 1694.577185

  },

  {

    "region": "台北市",

    "unit": 39.56244844,

    "price": 63101.91847,

    "unit_price": 1655.043669

  },

  {

    "region": "新北市",

    "unit": 33.11200327,

    "price": 47315.73129,

    "unit_price": 1501.26019

  },

  {

    "region": "宜蘭",

    "unit": 36.26450183,

    "price": 48655.03391,

    "unit_price": 1489.35871

  },

  {

    "region": "花蓮",

    "unit": 42.60729097,

    "price": 55846.34104,

    "unit_price": 1427.583885

  },

  {

    "region": "雲林",

    "unit": 37.96167857,

    "price": 44534.22619,

    "unit_price": 1293.030994

  }

];

 四、 宣告svg 畫布的大小範圍

使用 translate 可以讓圖形在 x 軸或 y 軸進行位移 ( 中括號為不是必須的值 )，所謂的位移是指原本的坐標加上多少。

var svg = d3.select('.svg');

 

  var margin = 80,

      width = 960 - margin * 0.7,

      height = 500 - margin * 2-30;

   

  svg.attr({

    "width": width + margin,

    "height": height + margin * 2,

    "transform": "translate(" + margin + "," + margin + ")"

  });    

 linear 意即會有等比例的縮放大小

.domain 輸入的資料來源 (0, N)
.range    輸出的資料範圍(0,N) 

白話文的意思~ 如果你的資料來源介於(0,990) , 但輸出的數值範圍(0,100), d3的函數就會自動把值等比例的縮小至(0~100)的區間喔

var xScale_price = d3.scale.linear()

    .domain([0, data.length])

    .range([0, width]);

 

  // y 軸比例尺 2 繪製座標軸用

  var yScale2_price = d3.scale.linear()

    .domain([0, 100000])

    .range([height, 0]);

Asix : 繪製刻線
.scale    比例尺
.orient  畫線的位置  (top  bottom   left  rieght )
.ticks     刻度的數量
.tickFormat : 設定資料格式 / 顯示刻度

 // x 軸

  var xAxis = d3.svg.axis()

    .scale(xScale_price)

    .orient("bottom")    

    .ticks( data.length )

    .tickFormat(function(i){      

      return (data[i]) ?  data[i].region : '';   // 這裡控制坐標軸的單位

    });

  // y 軸

  var yAxis = d3.svg.axis()

    .scale(yScale2_price)

    .orient("left");

新增的dom元件，將圖表繪製上畫面上

// 繪製 x 軸

  svg.append("g")

    .attr({

      "class": "x axis",

      "transform": "translate(" + margin + "," + (height + margin) + ")",

      'fill': '#ffffff'

    })

    .call(xAxis);

      // 繪製 y 軸

  svg.append("g")

    .attr({

      "class": "y axis",

      "transform": "translate(" + margin + ", " + margin + ")",

      'fill': '#ffffff'

    })

    .call(yAxis);

scale.category10   產生隨機10種顏色
selectAll                選擇dom元素 (像css語法)
data                        輸入資料來源
enter                      找出不夠資料塞入的元素筆數，再透過 append() 函式新增元素
append                   加上長方條(rect)
classed                   客製化的css 或傳入值控制css

    var xScale = d3.scale.linear().domain([0, data.length]).range([0, width]);

    var yScale  = d3.scale.linear().domain([0, 100000]).range([0, height]);

    var chartType = "price";

    var c10 = d3.scale.category10();

       // 產生長條圖

       svg.selectAll('.bar')

        .data(data)

        .enter()

        .append('rect')

        .classed('bar', true);

        svg.selectAll('.bar')

        .transition()

        .duration(700)

        .attr({

          'x': function(d, i) {

            return xScale(i) + margin

          },

          'y': function(d, i) {

            return height - yScale(d[chartType])+ margin;

          },

          'width': '5%',

          'height': function(d, i) {

            return yScale(d[chartType]);

          },

          'fill': function(d, i){

            return c10(i);

          },

          "transform": "translate(" +  width * (0.02) + ", " + 0 + ")",

        });

示易圖

Playwright 簡易介紹

常見的UI測試工具有哪些?

	Purpteer Sharp	Playwright	Cypress
瀏覽器	Chromium	Chrom、Firefox、WebKit、Edge 瀏覽器	Chrome跟 FireFox 、 Edge 、Brave
支援語言	c#	.NET、Node.js、Python、Java、JavaScript and TypeScript	JavaScript

 

Playwright 

優點:

 1. 跨平台，macOS、Linux、Windows皆可用

2. 跨瀏覽器，可操控 WebKit、Firefox、Chromium三大瀏覽器

3. 跨語言，Playwright原本是以Node.js開發，後來微軟陸續移植到Python、Java和.NET上，雖然語法不同但有著相似的API

4. 完整的工具鍊，Playwright包括Playwright與PlaywrightTest Runner 兩部份

 

安裝方式 

可以透過nuget 套件直接安裝 

安裝 Playwright CLI 工具

 這是一個 .NET CLI 的 Global Tool (全域工具)，安裝好之後才有 `playwright` 命令列工具可用。 

dotnet tool install global Microsoft.Playwright.CLI

 

安裝瀏覽器 

dotnet tool install global Microsoft.Playwright.CLI

 

 

錄製腳本

playwright codegen http://b2b.lab.etzone.net/Web/B2B_B2ELogin

 

可以透過錄製行為，產生程式碼

 

文件說明

https://playwright.dev/dotnet/docs 

l   Locators 定位器 :  自動waiting元素

 l   Text input 文字輸入

l   SetInputFilesAsync 上傳圖片

l   Evaluating JavaScript 執行JS語法

l    彈跳視窗

    實測的結果，錄製的效果算不錯，比起傳統手動寫code的速度快很多，如果需要大量UI的測試，很適合喔~  程式語法也簡易好懂，希望大家喜歡我的介紹和說明

新手學Docker 基本概念

有裝的vm的人都知道，當一台機器需要有兩個作業系統時，windows + Linux 怎麼辦? 最快的方法就是虛擬環境 VM，但需要切割一小塊的記憶體和空間，而且還需要安裝整個作業系統耶~ 於是有人提出了好方法 ，只要需要一小塊的空間 (Container) 容器，裝戴著部份核心的作業系統(比vm 更加的輕量化，就可以執行不同作業系統的功能，另外docker 不是用取代VM的，如果僅需要某些作業系統的核心或函式庫等就很適合Docker用法。

https://oer.gitlab.io/oer-on-oer-infrastructure/figures/OS/containers.png

但是想瞭解docker ,網路上有太多的名詞【映像檔Image】、【容器Container】、【倉庫Responsiory】越聽越胡塗，簡單的說如比你有一個windows作業系統的碟片這我們稱之為image，你將光碟片的東西安裝起來後執行的作業系統稱為container，我的解讀是這個意思，但專業術語還是看以下的說明吧

原作者: https://cwhu.medium.com/docker-tutorial-101-c3808b899ac6

l  映像檔 Image

Docker 映像檔是一個模板，用來重複產生容器實體。例如：一個映像檔裡可以包含一個完整的 MySQL 服務、一個 Golang 的編譯環境、或是一個 Ubuntu 作業系統。

透過 Docker 映像檔，我們可以快速的產生可以執行應用程式的容器。而 Docker 映像檔可以透過撰寫由命令行構成的 Dockerfile 輕鬆建立，或甚至可以從公開的地方下載已經做好的映像檔來使用。

l  容器 Container

就像是用蛋糕模具烤出來的蛋糕本體，容器是用映像檔建立出來的執行實例。它可以被啟動、開始、停止、刪除。每個容器都是相互隔離、保證安全的平台。，Docker 映像檔是唯讀（read-only）的，而容器在啟動的時候會建立一層可以被修改的可寫層作為最上層，讓容器的功能可以再擴充。這點在下面的實例會有更多補充。

l  倉庫 Repository

倉庫（Repository）是集中存放映像檔的場所，也可以想像成存放蛋糕模具的大本營。倉庫註冊伺服器（Registry）上則存放著多個倉庫，你可以任易的取用使用透過docker 的指令，你可以在上面建立多個倉庫，然後透過 push、pull 的方式上傳、存取。

 l  啟用hyper-v

筆者用自身的經驗告訴大家如何安裝吧~ 

如果你是 Windows 的專業版，就可以順利的點選以下的Hyper-V的tool

因為我的作業系統是window 10 家用版，想啟用Hyper-V 的管理工具，沒有發現相關的選項~ 後續查相關文件發現是Windows home 不支援… WSDL, 我只能先用powershell 指令執行wsdl2

相關文件 : https://docs.microsoft.com/zh-tw/windows/wsl/install-manual

步驟一: 啟用windows 子系統linux 版

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

步驟二: 啟用VM

dism.exe/online/enable-feature/featurename:VirtualMachinePlatform/all/norestart

步驟三: 下戴Linux 核心更新套件

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

步驟四: 將wsl2 設為預設版本

wsl --set-default-version 2

以上做完後~ 恭喜你完成第一步了…  

l  安裝docker

相關文件: https://docs.docker.com/desktop/windows/install/

下戴點

https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe

 如果各位順利安裝完畢~  先恭喜各位完成docker安裝囉

SQL LOCK的情境介紹

  

一、Uplock 更新鎖 

用於可更新的資源上。防止當多個工作階段正在讀取、鎖定及後來可能更新資源時發生常見的死結。

二、ReadPast 系統會略過資料被鎖定的資料列，取回未被鎖定的資料列 

以上兩個功能搭配的話，不會讓資料一直被鎖定中，如果交易發生碰撞行為時，會另外取得未被鎖定的資料，減少碰撞的機率。 

視窗A:

USE joyceRemine GO  BEGIN TRANSACTION Transaction1   SELECT TOP 10 * FROM issues WITH (UPDLOCK,READPAST) order by # asc   WAITFOR DELAY '00:00:30'  ROLLBACK

同時另開新視窗

視窗B:

SELECT TOP 10 * FROM issues WITH (UPDLOCK,READPAST) order by # asc

結果如下 : 視窗B撈出另外10筆資料，不會與A視窗的資料重複

視窗A                       視窗B

 如果搭配update 語法 

BEGIN TRANSACTION Transaction1         UPDATE issues         SET 更新日期 = GETDATE()         WHERE # in (SELECT TOP 10 # FROM issues WITH (UPDLOCK,READPAST) order by # asc )   WAITFOR DELAY '00:00:10' COMMIT

 這種語法就不用擔心死結了，就算同時大量湧進資料表執行這隻SPX，也不會更新同一批的資料囉~