D3 筆記

来源:https://www.cnblogs.com/risejl/archive/2022/09/28/16736685.html
-Advertisement-
Play Games

#背景 學習前端新框架、新技術。如果需要做一些資料庫的操作來增加demo的體驗（CURD流程可以讓演示的體驗根據絲滑） 最開始的時候一個演示程式我們會調用後臺，這樣其實有一點弊端，就是增加了開發和維護成本，簡單的一個demo不應該勞師動眾 後來我會在demo中使用一些websql，奈何，websql ...


D3

D3 or D3.js 代表 "Data Driven Documents"

選中、添加元素

select() 方法從文檔中選擇一個元素，它接收目標元素的名稱作為參數並返回第一個匹配該名稱 HTML 節點。舉例：

const anchor = d3.select('a');

append()方法接收添加到文檔中的元素，它會把該元素添加到一個選中的 HTML 節點，然後返回對該節點的引用。

text()方法可以設置被選中節點的文本也可以得到當前文本。若是設置文本，需要將字元串作為參數傳遞。

D3 允許方法的嵌套。

下麵是一個選中無序列表，並添加一個 list 元素的方法：

d3.select("ul")
	.append("li")
	.text("very important")

選中一組元素

使用 selectAll() 選中一組元素。它返回一個 HTML 節點數組。

下麵是一個選中所有超鏈接元素的例子：

const anchors = d3.selectAll("a");

例子：

d3.selectAll("li")
  .text("list item")

使用數據

首先使用 data() 方法去選擇 DOM 元素來和數據聯繫在一起。數據集作為參數傳給該方法。

使用 enter() 方法為數據集中每一塊元素創建一個新的 DOM 元素。

下麵的例子是選擇 ul 元素並根據數組創建列表。

const dataset = ["a", "b", "c"];
d3.select("ul").selectAll("li")
	.data(dataset)
	.enter()
	.append("li")
	.text("New Item");

使用動態數據

text() 方法可以接收字元串或者回調函數作為參數。

selection.text((d) => d)

在上面的這個方法中，參數 d 指的是該數據集的一個入口。

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      // Add your code below this line

      .text((d) => d + " USD");

      // Add your code above this line
  </script>
</body>

/*
12 USD

31 USD

22 USD

17 USD

25 USD

18 USD

29 USD

14 USD

9 USD
*/

給元素加內聯樣式

使用 style() 各動態元素添加樣式。該方法接收一個以逗號 , 分隔的鍵值對作為參數。

下麵是一個把選中文本設置為藍色的例子：

selection.style("color","blue");

設置選中字體：

d3.select("body")
  .style("font-family","verdana");

基於數據改動樣式

在 style() 中同樣可以使用回調函數來改動不同元素的樣式。使用參數 d 來代表數據點。

下麵的例子是把數據集中小於 20 的元素設置為紅色，其它設置為綠色。

d3.selectAll("h2")
  .style("color", (d) => {
    if (d < 20) {
      return "red";
    } else return "green";
  });

添加 class 屬性

attr() 方法和 style() 方法類似，他接收以逗號分割的值，並且可以使用回調函數。

下麵是一個給元素添加 container class 的例子。

selection.attr("class", "container");

動態修改元素的高度

結合上面所學創建一個條形圖 (bar chart)。

<style>
  .bar {
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
			.style("height", (d) => d + "px");
  </script>
</body>

改變條形圖的展示

<style>
  .bar {
    width: 25px;
    height: 100px;
    /* Add your code below this line */
    marign: 2px;
    /* Add your code above this line */
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", (d) => (d*10 + "px")) // Change this line
  </script>
</body>

SVG in d3

SVG 的全稱是：Scalable Vector Graphics。

scalable 的意思是對物體放大或者縮小不會使物體馬賽克（pixelated）。

SVG 在 HTML 中使用 svg 標簽實現。

下麵是一個創建 SVG 的例子：

<style>
  svg {
    background-color: pink;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 1
    00;

    const svg = d3.select("body")
                  // Add your code below this line
 svg.append("svg").attr("width",w).attr("height",h);
                  // Add your code above this line
  </script>
</body>

SVG 形狀

SVG 支持多種數量的形狀，例如：使用 <rect> 來表示矩形。

當把一個形狀放入 SVG 區域時，可以設置 x，y 坐標系。原點（0,0）表示左上角。x 的正值會使圖形向右移動，y 的正值向上移動。例如：把一個形狀放在 500 寬，100 高的位置需要設置 x = 250，y = 50。

對於 <rect> 來說，它有四個屬性，分別是高度、寬度和 x，y。該元素必須添加到 svg節點，而不是 body 節點。

下麵的例子是設置一個矩形

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  // Add your code below this line
svg.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
                  // Add your code above this line
  </script>
</body>

對數據集中的每一個數據點創建一個 bar

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("rect")
       // Add your code below this line
.data(dataset)
.enter()
.append("rect")
       // Add your code above this line
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

對每個 bar 動態設置坐標

條形圖的 y 坐標應該是一致的，而 x 坐標應該有所不同。通過設置 attr() 的回調函數來動態設置。回調函數接收兩個參數，第一個用 d 代表數據點本身，第二個代表數據點在數組中的索引。格式：

selection.attr("property", (d,i) => {
  
})

註：不需要使用 for 或者 forEach() 迴圈。

下麵是擴大 30 倍的例子：

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => {
         // Add your code below this line
return i*30;
         // Add your code above this line
       })
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

動態改變高度

實際上就是修改數據點

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", (d, i) => {
         // Add your code below this line
return d * 3;
         // Add your code above this line
       });
  </script>
</body>

倒置 SVG 元素

y 坐標也就是 y = heightOfSVG - heightOfBar 會把 bar 置於右上側。

一般公式：y = h - m * d，其中 m 是數據點 scale 的常量。

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => {
         // Add your code below this line
return 100 - 3 * d;
         // Add your code above this line
       })
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d);
  </script>
</body>

改變 SVG 圖片的顏色

在 SVG 中，rect 形狀使用 fill 來控制顏色。

下麵設置顏色為海軍藍。

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       // Add your code below this line
.attr("fill", "navy");
       // Add your code above this line
  </script>
</body>

加標簽

使用 SVG 的 text 給元素加標簽。該屬性同樣具有 x 和 y 屬性。

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy");

    svg.selectAll("text")
       .data(dataset)
       .enter()
       // Add your code below this line
 .append("text")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d - 3)
       .text((d, i) => d);
       // Add your code above this line
  </script>
<body>

給標簽加樣式

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => d * 3)
       .attr("fill", "navy");

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (3 * d) - 3)
       // Add your code below this line
.attr("fill","red")
.style("font-size", "25px")
       // Add your code above this line
  </script>
</body>

給元素添加 hover 效果

<style>
  .bar:hover {
    fill: brown;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy")
       // Add your code below this line
			.attr("class", "bar")
       // Add your code above this line

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (3 * d) - 3);

  </script>
</body>

給元素添加 tooltip

當用戶 hover 在一個元素上，tooltip 可以展示更多的信息。

使用 SVG 的 title 給元素添加 tooltip。使用 title 配合 text() 方法給條動態添加數據。

下麵是一個例子：

<style>
  .bar:hover {
    fill: brown;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    const w = 500;
    const h = 100;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => d * 3)
       .attr("fill", "navy")
       .attr("class", "bar")
       // Add your code below this line
  .append("title")
  .text((d) => {
    return d;
  })
       // Add your code above this line
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (d * 3 + 3))
  </script>
</body>

使用 SVG 環形創建 scatterplot

scatterplot 是另一種可視化的類型。它使用圓環來遍曆數據點，每個數據點有兩個值。這些值和 x、y 坐標綁定，用來定位圓環的位置。

SVG 的 circle 標簽創建圓形。

下麵是一個圓形的例子：

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
    const w = 500;
    const h = 500;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("circle")
       // Add your code below this line
.data(dataset)
.enter()
.append("circle");
       // Add your code above this line
  </script>
</body>

給圓形添加屬性

圓形主要有三個屬性。cx 和 cy 屬性是坐標系。r 屬性規定圓形的半徑。

這三個屬性可以使用一個回調函數動態設置它們的值。記住，所有在 data(dataset) 鏈後的方法會對每個數據項運行一次。回調函數中的 d 表示當前數據集合中的數據項。可以使用括弧表示法去得到數據集中的元素，如：d[0]。

下麵是一個例子：

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];

    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       // Add your code below this line
.attr("cx", (d) => d[0])
.attr("cy", (d) => h - d[1])
.attr("r", 5)
       // Add your code above this line
  </script>
</body>

給 scatterplot 添加標簽

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
    const w = 500;
    const h = 500;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d, i) => d[0])
       .attr("cy", (d, i) => h - d[1])
       .attr("r", 5);
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       // Add your code below this line
       .attr("x", (d) => d[0] + 5)
       .attr("y", (d) => h - d[1])
       .text((d) => (d[0] + ", " + d[1]))
       // Add your code above this line
  </script>
</body>

創建線性 scale

scales 是一種函數，可以把數據集的數據映射為 SVG 畫布。

例子：

const scale = d3.scaleLinear();

預設情況，scale 使用實體關係。輸入和輸出的結果相同。

<body>
  <script>
    // Add your code below this line
    const scale = d3.scaleLinear(); // Create the scale here
    const output = scale(50); // Call scale with an argument here
    // Add your code above this line
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>

給 scale 設置 domain 和 range

假如一個數據集範圍從50 - 480，這是輸入的範圍，也叫 domain。

然後打算把這些數據點映射到 x 軸上，從 10 units 到 500 units，這就是輸出的範圍，也叫 range。

domian() 和 range() 方法為 scale 設置這些值。這兩個方法接收一個至少包含兩個元素數組作為參數。例如：

scale.domain([50, 480]);
scale.range([50, 480]);
scale(40);
d3.scaleLinear();

最小的 domain 是 50 映射到最小的 range 為 10。

例子：

<body>
  <script>
    // Add your code below this line
    const scale = d3.scaleLinear();
scale.domain([250, 500]).range([10, 150]);
    // Add your code above this line
    const output = scale(50);
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>

使用 d3.max 和 d3.min 方法找出數據集的最大和最小元素

例子：

const exampleData = [3, 45, 10, 9];
d3.min(exampleData);
d3.max(exampleData);

有些時候數據集是嵌套的，這樣的情況下，需要給這兩個函數傳入回調函數。這時，參數 d 代表當前內部的數組。

const locationData = [[1, 7],[6, 3],[8, 3]];
const minX = d3.min(locationData, (d) => d[0]);
// minX = 1;

<body>
  <script>
    const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
    // Add your code below this line
    const output = d3.max(positionData, (d) => d[2]); // Change this line
    // Add your code above this line
    d3.select("body")
      .append("h2")
      .text(output)
  </script>
</body>
// output = 8;

使用動態 scale

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
    const w = 500;
    const h = 500;
    // Padding between the SVG canvas boundary and the plot
    const padding = 30;
    // Create an x and y scale
    const xScale = d3.scaleLinear()
                    .domain([0, d3.max(dataset, (d) => d[0])])
                    .range([padding, w - padding]);
    // Add your code below this line
 const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => d[1])])
  .range([h - padding, padding]);
    // Add your code above this line
    const output = yScale(411); // Returns 30
    d3.select("body")
      .append("h2")
      .text(output)
  </script>
</body>

使用預定義的 scale 放置元素

<body>
  <script>
    const dataset = [
      [  34,  78 ],
      [ 109, 280 ],
      [ 310, 120 ],
      [  79, 411 ],
      [ 420, 220 ],
      [ 233, 145 ],
      [ 333,  96 ],
      [ 222, 333 ],
      [  78, 320 ],
      [  21, 123 ]
    ];
    
    const w = 500;
    const h = 500;
    const padding = 60;
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => d[0])])
      .range([padding, w - padding]);
    
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => d[1])])
      .range([h - padding, padding]);
    
    const svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
    
    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", (d) => xScale(d[0]))
      .attr("cy", (d) => yScale(d[1]))
      .attr("r", 5);
      
    svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text((d) =>  (d[0] + ", " + d[1]))
      .attr("x", (d) => xScale(d[0] + 10))
      .attr("y", (d) => yScale(d[1]));
  </script>
</body>

加入 Axes

axisLeft() 和 axisBottom() 方法，去渲染 x 軸和 y 軸，相對的，根據 xScale 創建 xAxis

const xAxis = d3.axisBottom(xScale);

下一步就是渲染

svg.append("g")
	 .attr("transform", "translate(0, " + (h - padding) + ")")
	 .call(xAxis);

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Pjax 下動態載入插件方案
    在純靜態網站里，有時候會動態更新某個區域往會選擇 Pjax（swup、barba.js）去處理，他們都是使用 ajax 和 pushState 通過真正的永久鏈接，頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理，有些人可能會全量選擇載入，這樣會導致加 ...
  • JS 模塊化- 05 ES Module & 4 大規範總結
    1 ES Module 規範 ES Module 是目前使用較多的模塊化規範，在 Vue、React 中大量使用，大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式：按需導出 和 預設導出。 按需導出是使用 export 關鍵字，將需要導出的成員 ...
  • HTML 中的 JavaScript
    HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript？"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢？在js早期，網景公司創造出了<script>元素，用來講JavaScript插入到HTML中。 <scrip ...
  • 微信小程式開發優化
    一、開發優化一 1.使用Vant Weapp 1.1 什麼是Vant Weapp Vant Weapp官網鏈接 Vant Weapp是有贊前端團隊開源的一套小程式UI組件庫，助力開發者快速搭建小程式應用。它所使用的是MIT開源許可協議，對商業使用比較友好。 1.2 安裝Vant Weapp組件庫 安 ...
  • 什麼是JavaScript?
    什麼是JavaScript? 前言 本文內容為 博主閱讀“紅寶書”之後的總結和個人理解，有什麼錯誤歡迎指正！ 一句話概括語言的誕生 1995年，網景公司一位名叫Brendan Eich的工程師，開發了一個叫Mocha的腳本語言。後來改名叫 JavaScript，以便蹭當時大火的Java的熱度。 到底 ...
  • HTML&CSS-盒模型運用居中方式合集
    方法：定位，外邊距，內邊距，層級，邊框； 一個元素； 兩個元素； 三個元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e ...
  • Java Script 迴圈，數組，對象，判斷，階乘，查找-綜合運用合集
    輸出100個hello world. for (var i = 1; i <= 100; i++) { console.log("hello world");} 創建一個包含1~100的數組. var array = [];for (var i = 1; i <= 100; i++) { array ...
  • vue3+vant+vue-router+axios+pinia+vite框架搭建
    @(vue2.x引入threejs) vue2.x引入threejs npm安裝 npm install three 使用指定版本: npm install three@<版本號> 其他插件 因為本次開發需要引入3D模型,所以需要使用 MTLLoader, OBJLoader兩種載入器,因為開發需求 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類