文由ScriptEcho平臺提供技術支持

項目地址：傳送門

使用 Vue 和 Plotly.js 創建交互式 3D 網格圖

應用場景介紹

3D 網格圖是一種強大的可視化工具，可用于表示具有三個維度的數據。它們廣泛應用于科學、工程和醫學等領域，用于顯示復雜數據并揭示潛在模式。

代碼基本功能介紹

此代碼使用 Vue 和 Plotly.js 庫創建一個交互式 3D 網格圖。該網格圖顯示兩個由隨機數據生成的網格表面，用戶可以從不同角度旋轉和縮放網格。

功能實現步驟及關鍵代碼分析說明

1. **安裝依賴項：**使用 npm install --save plotly.js-dist 安裝 Plotly.js 庫。
2. **創建網格數據：**使用 getrandom 函數生成隨機數據點，用于定義網格表面的 x、y 和 z 坐標。
3. **定義網格跡線：**使用 Plotly.js 的 trace1 和 trace2 對象定義兩個網格跡線，并指定其 x、y、z 坐標、顏色和其他屬性。
4. **設置布局：**使用 layout 對象設置網格圖的布局，包括坐標軸標題、尺寸、邊距和場景屬性。
5. **繪制網格圖：**使用 Plotly.newPlot 函數將網格跡線和布局繪制到 HTML 元素 myDiv 中。

關鍵代碼分析：

var trace1={
  type: 'mesh3d',
  x: getrandom(1000, 200),
  y: getrandom(1000, 300),
  z: getrandom(1000, 150),
  color: 'lightblue',
}

此代碼定義了第一個網格跡線，其中 type 屬性指定了網格圖類型為 3D 網格，x、y 和 z 屬性指定了網格表面的坐標數據，color 屬性指定了網格的顏色。

var layout={
  scene: {
    xaxis: { title: 'X AXIS TITLE' },
    yaxis: { title: 'Y AXIS TITLE' },
    zaxis: { title: 'Z AXIS TITLE' },
  },
  autosize: false,
  width: 550,
  height: 500,
  margin: {
    l: 0,
    r: 0,
    b: 50,
    t: 50,
    pad: 4,
  },
}

此代碼定義了網格圖的布局，包括坐標軸標題、網格圖的尺寸和邊距。scene 對象允許用戶控制網格圖的場景屬性，例如相機角度和燈光。

總結與展望

開發經驗與收獲：

• 了解了 Plotly.js 庫用于創建交互式 3D 網格圖的功能。
• 掌握了 Vue 和 Plotly.js 的集成，以動態更新和操作網格圖。
• 提高了對 3D 數據可視化的理解。

未來拓展與優化：

• 允許用戶輸入自己的數據以生成網格圖。
• 添加交互式控件，例如縮放、平移和旋轉網格。
• 探索使用不同的網格類型和顏色映射。
• 將網格圖與其他可視化組件集成，以創建更豐富的儀表板。
• 更多組件：
• 
  

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生命是不倒行的

也不與昨日一同停留

- 2024.04.08 -

隨著現代網頁設計的不斷演進，傳統的布局方式已經逐漸不能滿足設計師和開發者們對于高效、靈活且強大布局系統的追求。而CSS Grid網格布局，正是在這樣的背景下應運而生的。

今天，我們就來深入探討CSS Grid布局的魅力所在，帶你解鎖這項強大的設計工具，讓網頁布局變得更加簡單和高效。

一、什么是CSS Grid布局？

CSS Grid布局，簡稱為Grid，是CSS的一個二維布局系統，它能夠處理行和列，使得網頁布局變得更加直觀和強大。與傳統的布局方式相比，Grid能夠輕松實現復雜的頁面結構，而無需繁瑣的浮動、定位或是使用多個嵌套容器。

Grid網格布局是一種基于網格的布局系統，它允許我們通過定義行和列的大小、位置和排列方式來創建復雜的網頁布局。

這與之前講到的flex一維布局不相同。

設置display:grid/inline-grid的元素就是網格布局容器，這樣就能觸發瀏覽器渲染引擎的網格布局算法。

<div>
<div class="item item-1">
<p></p >
</div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

上述代碼實例中，.container元素就是網格布局容器，.item元素就是網格的項目，由于網格元素只能是容器的頂層子元素，所以p元素并不是網格元素。

二、Grid的基本概念

首先，我們來了解一下CSS Grid布局的核心概念：

容器（Container）：

設置了display: grid;的元素成為容器。它是由一組水平線和垂直線交叉構成，就如同我們所在的地區是由小區和各個路構成。

項目（Item）：

容器內的直接子元素，稱為項目。

網格線（Grid Lines）：

劃分行和列的線條，可以想象成坐標軸。正常情況下n行會有n+1根橫向網格線，m列有m+1根縱向網格線。比如田字就好像是一個三條水平線和三條垂直線構成的網格元素。

上圖是一個 2 x 3 的網格，共有3根水平網格線和4根垂直網格線。

行：

即兩個水平網格線之間的空間，也就是水平軌道，就好比我們面朝北邊東西方向橫向排列的樓房稱為行。

列：

即兩個垂直網格線之間的空間，也就是垂直軌道，也就是南北方向排列的樓房。

單元格：

由水平線和垂直線交叉構成的每個區域稱為單元格，網絡單元格是CSS網格中的最小單元。也就是說東西和南北方向的路交叉后劃分出來的土地區域。

網格軌道（Grid Tracks）：

兩條相鄰網格線之間的空間。

網格區域（Grid Area）：

四條網格線圍成的空間，可以是行或列。本質上，網格區域一定是矩形的。例如，不可能創建T形或L形的網格區域。

三、Grid的主要屬性

CSS Grid網格布局的主要屬性包括：

• display：設置元素為網格容器或網格項。例如，display: grid; 將元素設置為網格容器，而 display: grid-item; 將元素設置為網格項。

• grid-template-columns 和 grid-template-rows：用于定義網格的列和行的大小。
• grid-column-gap 和 grid-row-gap：用于定義網格的列和行的間距。
• grid-template-areas：用于定義命名區域，以便在網格中引用。
• grid-auto-flow：用于控制網格項的排列方式，可以是行（row）或列（column）。
• grid-auto-columns 和 grid-auto-rows：用于定義自動生成的列和行的大小。
• grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于定義網格項的位置。
• justify-items、align-items 和 place-items：用于對齊網格項。
• grid-template：一個復合屬性，用于一次性定義多個網格布局屬性。

下面將詳細介紹這些屬性的概念及作用：

3.1 display

通過給元素設置：display:grid | inline-grid，可以讓一個元素變成網格布局元素。

語法：

display: grid | inline-grid;

• display: grid：表示把元素定義為塊級網格元素，單獨占一行;
• display:inline-grid：表示把元素定義為行內塊級網格元素，可以和其他塊級元素在同一行。

3.2 grid-template-columns和grid-template-rows

grid-template-columns和grid-template-rows：用于定義網格的列和行的大小。

• grid-template-columns 屬性設置列寬
• grid-template-rows 屬性設置行高

.wrapper {
display: grid;
/* 聲明了三列，寬度分別為 200px 200px 200px */
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
/* 聲明了兩行，行高分別為 50px 50px */
grid-template-rows: 50px 50px;
}

以上表示固定列寬為 200px 200px 200px，行高為 50px 50px。

上述代碼可以看到重復寫單元格寬高，我們也可以通過使用repeat()函數來簡寫重復的值。

• 第一個參數是重復的次數
• 第二個參數是重復的值

所以上述代碼可以簡寫成：

.wrapper {
display: grid;
grid-template-columns: repeat(3,200px);
grid-gap: 5px;
grid-template-rows:repeat(2,50px);
}

除了上述的repeact關鍵字，還有：

auto-fill：表示自動填充，讓一行（或者一列）中盡可能的容納更多的單元格。

grid-template-columns: repeat(auto-fill, 200px)

表示列寬是 200 px，但列的數量是不固定的，只要瀏覽器能夠容納得下，就可以放置元素。

fr：片段，為了方便表示比例關系。

grid-template-columns: 200px 1fr 2fr

表示第一個列寬設置為 200px，后面剩余的寬度分為兩部分，寬度分別為剩余寬度的 1/3 和 2/3。

minmax：產生一個長度范圍，表示長度就在這個范圍之中都可以應用到網格項目中。第一個參數就是最小值，第二個參數就是最大值。

minmax(100px, 1fr)

表示列寬不小于100px，不大于1fr。

auto：由瀏覽器自己決定長度。

grid-template-columns: 100px auto 100px

表示第一第三列為 100px，中間由瀏覽器決定長度。

3.3 grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性

grid-column-gap和grid-row-gap，用于定義網格的列間距和行間距。grid-gap 屬性是兩者的簡寫形式。

• grid-row-gap: 10px 表示行間距是 10px
• grid-column-gap: 20px 表示列間距是 20px
• grid-gap: 10px 20px 等同上述兩個屬性

3.4 grid-auto-flow 屬性

grid-auto-flow，用于控制網格項的排列方式，可以是行（row）或列（column）。

• 劃分網格以后，容器的子元素會按照順序，自動放置在每一個網格。
• 順序就是由grid-auto-flow決定，默認為行，代表"先行后列"，即先填滿第一行，再開始放入第二行。

當修改成column后，放置變為如下：

3.5 justify-items 屬性， align-items 屬性， place-items 屬性

justify-items、align-items和place-items，用于定義網格項目的對齊方式。

• justify-items 屬性設置單元格內容的水平位置（左中右）
• align-items 屬性設置單元格的垂直位置（上中下）

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

屬性對應如下：

• start：對齊單元格的起始邊緣
• end：對齊單元格的結束邊緣
• center：單元格內部居中
• stretch：拉伸，占滿單元格的整個寬度（默認值）

place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式。

3.6 justify-content 屬性， align-content 屬性， place-content 屬性

• justify-content屬性是整個內容區域在容器里面的水平位置（左中右）
• align-content屬性是整個內容區域的垂直位置（上中下）

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

兩個屬性的寫法完全相同，都可以取下面這些值：

• start - 對齊容器的起始邊框
• end - 對齊容器的結束邊框
• center - 容器內部居中

• space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
• space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
• space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
• stretch - 項目大小沒有指定時，拉伸占據整個網格容器。

3.7 grid-auto-columns 屬性和 grid-auto-rows 屬性

有時候，一些項目的指定位置，在現有網格的外部，就會產生顯示網格和隱式網格。

比如網格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多余的網格，以便放置項目。超出的部分就是隱式網格。

而grid-auto-rows與grid-auto-columns就是專門用于指定隱式網格的寬高。

3.8 grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性

指定網格項目所在的四個邊框，分別定位在哪根網格線，從而指定項目的位置。

• grid-column-start 屬性：左邊框所在的垂直網格線
• grid-column-end 屬性：右邊框所在的垂直網格線
• grid-row-start 屬性：上邊框所在的水平網格線
• grid-row-end 屬性：下邊框所在的水平網格線

<style>
#container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>

<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>

通過設置grid-column屬性，指定1號項目的左邊框是第二根垂直網格線，右邊框是第四根垂直網格線。

3.9 grid-area 屬性

grid-area 屬性指定項目放在哪一個區域。

.item-1 {
grid-area: e;
}

意思為將1號項目位于e區域

grid-area屬性一般與上述講到的grid-template-areas搭配使用。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

3.10 justify-self 屬性、align-self 屬性以及 place-self 屬性

justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個項目。

align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個項目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}

這兩個屬性都可以取下面四個值。

• start：對齊單元格的起始邊緣。
• end：對齊單元格的結束邊緣。
• center：單元格內部居中。
• stretch：拉伸，占滿單元格的整個寬度（默認值）

四、Grid網格布局應用場景

CSS Grid網格布局的應用場景非常廣泛，包括但不限于：

1、創建復雜的網頁布局：

CSS Grid網格布局可以輕松創建出復雜的網頁布局，如多列布局、不規則布局等。

2、創建響應式設計：

CSS Grid網格布局可以輕松實現響應式設計，通過調整網格的大小和間距，可以適應不同的屏幕尺寸。

3、創建復雜的組件布局：

CSS Grid網格布局也可以用于創建復雜的組件布局，如卡片布局、輪播圖布局等。

總的來說，CSS Grid網格布局是一種強大的布局工具，可以幫助網頁設計者輕松創建出各種復雜的網頁布局。

CSS Grid布局為我們提供了一個全新的視角來思考頁面布局，它讓復雜布局的實現變得簡單明了。隨著瀏覽器支持度的提高，未來的網頁設計將更加靈活和富有創意。

掌握了CSS Grid布局，你就已經邁出了成為前端設計高手的重要一步。不斷實踐，不斷探索，你會發現更多Grid的神奇之處。

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

格布局（Grid）是CSS中一種用于創建二維網格布局的布局模型。它允許我們在網頁中以行和列的形式定義網格，并在這些網格中放置HTML元素。網格布局是一個強大且靈活的CSS布局系統，它比傳統的浮動布局和Flexbox布局更適用于復雜的網頁布局。

一、特點和優勢：

1. 二維布局：網格布局是一個二維布局模型，可以同時控制元素在行和列方向上的位置和大小。

2. 自適應：網格布局可以根據網格容器的大小自動調整元素的位置和大小，實現響應式布局。

3. 靈活性：可以創建復雜的布局結構，支持合并單元格和多層嵌套等高級特性。

4. 相對定位：元素可以通過網格行和列的索引進行相對定位，而無需設置具體的像素或百分比值。

5. 簡化HTML結構：與傳統的浮動布局相比，網格布局能夠簡化HTML結構，減少冗余的HTML代碼。

二、 基本概念：

1. 網格容器（Grid Container）：應用網格布局的父元素稱為網格容器，通過設置 display: grid 可將其指定為網格容器。

2. 網格項目（Grid Item）：位于網格容器內的子元素稱為網格項目，它們是網格的組成部分。

3. 網格行（Grid Row）：網格容器中的水平方向劃分為一行一行的單元，每行可以包含多個網格項目。

4. 網格列（Grid Column）：網格容器中的垂直方向劃分為一列一列的單元，每列可以包含多個網格項目。

三、 使用示例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 定義3列，每列寬度比例為 1:2:1 */
  grid-gap: 10px; /* 設置網格間隙 */
}

.item {
  grid-column: 2; /* 元素跨越第2列 */
  grid-row: 1 / span 2; /* 元素從第1行開始，跨越2行 */
}

以上示例中，.container 是網格容器，.item 是網格項目。通過 grid-template-columns 可以定義網格的列寬，grid-gap 可以設置網格之間的間隔。元素 .item 使用 grid-column 和 grid-row 屬性指定在網格中的位置。

總體而言，網格布局是一種非常強大的CSS布局系統，可以用于創建復雜和靈活的網頁布局。它的出現使得前端開發者能夠更方便地實現復雜的網頁設計和響應式布局。