[ASP.NET C#] 022 | 使用d3.js建立一般資料表 table @ 門外漢的筆記

因d3.js靈活性較高，且在前端視覺開發上直接結合jquery設計，可以呈現多樣化的功能。

後端主要為資料查詢與統計數量

1. 資料查詢

string strSql = "SELECT * FROM tbRMA";
DataTable myTable = dataQuery.queryToDataTable(strSql);

//若要過濾指定資料, 可以使用dataview的RowFilter.

2.設定比較的欄位

string xField = "FACTORY";
string yField = "DEFECT_NAME";

3.使用LINQ統計數量

var query = from t in myTable.AsEnumerable()
group t by new { t1 = t.Field<string>(yField), t2 = t.Field<string>(xField) } into g
//group row by row["FACTORY"] into g
//group data by data.Field<DateTime>("FACTORY") into g
select new {
yField = g.Key.t1,
xField = g.Key.t2,
COUNT = g.Count(),
};

4.將資料標準化josn格式，並用base64格式返回字串。

[ 前端 ]

1.取得資料並將資料轉為json

引用

$(function () {
//設定Session
$("#btnQuery").click(function () {
var qq = "{query_string:'" + btoa("{ID: 'A01'}") +"'}";
$.ajax({
type: "post",
data: qq,
url: "d3_create_table.aspx/ajax_query_data?"+Math.random(),
dataType: "json",
contentType: "application/json; charset=UTF-8",
success: function (response) {
var dataset = JSON.parse(atob(response.d));
//var dataset= JSON.parse(decodeURIComponent(atob(response.d)));
console.log(dataset);
}
});

});
});

2. 取得欄位名稱

var columnNames = d3.keys(data[0]); //沒有排序, 需確保第一行資料欄位完整性.

//這個狀況會發生在建立比較表時，將資料內容轉為欄位名稱，如將每一個工廠作為欄位FACTORT_A，FACTORT_B.

3.選擇定位標籤位置id=table-content，插入一張資料表。

var table = d3.select("#table-content ").append("table");

4.新增欄位表頭

var header = table.append("thead").append("tr");

header.selectAll("th")
.data(columnNames)
.enter()
.append("th").text(function (d) { return d; });

5.新增資料行

var tablebody = table.append("tbody");
var rows = tablebody
.selectAll("tr")
.data(data)
.enter().append("tr");

6.新增資料內容

var cells = rows.selectAll("td")
.data(row => d3.entries(row))
.enter()
.append("td")
.text(function (d) {
return d.value;
});

另一種欄位指定的表格建立方式

var xFieldName = dataset.xFieldName;
var yFieldName = dataset.yFieldName;

var columnHeaders = [xFieldName, yFieldName, "Count"];
var columnNames = ["xField", "yField", "count"];

var table = d3.select("#table-content").append("table");
var header = table.append("thead").append("tr");
header
.selectAll("th")
.data(columnHeaders)
.enter()
.append("th").text(function (d) { return d; });

var tablebody = table.append("tbody");
var rows = tablebody
.selectAll("tr")
.data(data)
.enter().append("tr");