我們有許多眾所周知的圖表類(lèi)型：酒吧，甜甜圈，線(xiàn)，派，您可以命名。所有流行的圖表庫(kù)支持這些。然後有圖表類(lèi)型甚至沒(méi)有名稱(chēng)。使用堆疊的（嵌套）正方形查看此DreamT-Up圖表，可以幫助可視化相對(duì)大小，或者不同的值相互比較：

我們正在做什麼

沒(méi)有任何互動(dòng)，創(chuàng)建此設(shè)計(jì)非常簡(jiǎn)單。一種方法是堆疊元素（例如SVG 元素，甚至是HTML Divs），尺寸的尺寸均勻，其中所有左下角都觸及相同的點(diǎn)。

但是，一旦我們引入了一些互動(dòng)性，事情就會(huì)變得棘手。應(yīng)該這樣做：當(dāng)我們將鼠標(biāo)移到其中一種形狀上時(shí)，我們希望其他人逐漸消失並移開(kāi)。

我們將使用矩形和掩碼創(chuàng)建這些不規(guī)則的形狀 - 具有和元素的字面

現(xiàn)在，在我們開(kāi)始之前，您可能會(huì)想知道是否是使用自定義形狀的更好的SVG替代品。絕對(duì)是可能的！但是用繪製形狀可能令人生畏，甚至?xí)兊昧鑱y。因此，我們正在使用“更容易”的元素來(lái)獲得相同的形狀和效果。

例如，這是我們必須使用來(lái)表示最大的藍(lán)色形狀。

 <svg viewbox="“" width="“" height="“">
  
</svg>

如果0H0V56…對(duì)您沒(méi)有任何意義，請(qǐng)查看“ SVG路徑語(yǔ)法：插圖指南”，以詳細(xì)說(shuō)明語(yǔ)法。

圖表的基礎(chǔ)

給定這樣的數(shù)據(jù)集：

鍵入datasetEntry = {
  標(biāo)籤：字符串；
  值：數(shù)字；
};

鍵入dataset = datasetEntry [];

const rawdataset：dataset = [
  {label：'bad'，值：1231}，
  {label：'begint'，value：6321}，
  {label：'開(kāi)發(fā)'，值：10028}，
  {label：'已完成'，值：12123}，，
  {label：'示例'，值：2120}
];

…我們想以這樣的SVG結(jié)束：

 <svg viewbox="“" width="“" height="“">
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
  <rect width="“" y="“" fill="“" ...> </rect>
  <rect width="“" y="“" fill="“" ...> </rect>
  <rect width="“" height="“" y="“" fill="“" ...> </rect>
</svg>

確定最高價(jià)值

在瞬間，我們需要最高價(jià)值會(huì)變得很明顯。我們可以使用Math.max（）獲取它。它接受任何數(shù)量的參數(shù)，並返回集合中的最高值。

 const dataseThighestValue：number = math.max（
  ... RAWDATASET.MAP（（輸入：DataSetEntry）=> entry.value）
）；

由於我們有一個(gè)小數(shù)據(jù)集，因此我們可以說(shuō)我們將獲得12123。

計(jì)算矩形的尺寸

如果我們看設(shè)計(jì)，則代表最高值（12123）的矩形覆蓋了圖表的整個(gè)區(qū)域。

我們?nèi)我膺x擇320個(gè)SVG尺寸。由於我們的矩形是正方形，因此寬度和高度相等。我們?nèi)绾问?2123等於320？較少的“特殊”值怎麼樣？ 6321矩形有多大？

換句話(huà)說(shuō)，我們?nèi)绾螌⒁粋€(gè)數(shù)字從一個(gè)範(fàn)圍（[0，12123]）映射到另一個(gè)範(fàn)圍（[0，320]）？或者，用更多的數(shù)學(xué)術(shù)語(yǔ)，我們?nèi)绾螌⒆兞繑U(kuò)展到[a，b]的間隔？

出於我們的目的，我們將實(shí)現(xiàn)這樣的功能：

 const remapvalue =（
  價(jià)值：數(shù)字，
  Frommin：數(shù)字，
  Frommax：數(shù)字，
  Tomin：數(shù)字，
  tomax：數(shù)字
）：數(shù)字=> {
  返回（（value -frommin） /（frommax -frommin）） *（tomax -tomin）tomin;
};

重新值（1231，0，12123，0，320）; // 32
重新值（6321，0，12123，0，320）; // 167
重新值（12123，0，12123，0，320）; // 320

由於我們將值映射到代碼中的相同範(fàn)圍，而不是一遍又一遍地傳遞最小值和最大值，因此我們可以創(chuàng)建一個(gè)包裝函數(shù)：

 const valuerMapper =（
  Frommin：數(shù)字，
  Frommax：數(shù)字，
  Tomin：數(shù)字，
  tomax：數(shù)字
）=> {
  返回（值：數(shù)字）：number => {
    返回重新值（Value，F(xiàn)rommin，F(xiàn)rommax，Tomin，Tomax）;
  };
};

const remapdatasetValuetosvgdimension = valueremapper（
  0，
  DataseThighestValue，
  0，
  svgdimension
）；

我們可以這樣使用：

 RemapdatasetValuetosvgdimension（1231）; // 32
RemapdatasetValuetosvgdimension（6321）; // 167
RemapdatasetValuetosvgdimension（12123）; // 320

創(chuàng)建和插入DOM元素

剩下的與DOM操縱有關(guān)。我們必須創(chuàng)建

請(qǐng)注意，我們使用的是CreateElementn，而不是更常見(jiàn)的Createlement。這是因?yàn)槲覀冋谑褂肧VG。 HTML和SVG元素具有不同的規(guī)格，因此它們屬於不同的名稱(chēng)空間URI。碰巧的是，CreateElement便利地使用HTML名稱(chēng)空間！因此，要?jiǎng)?chuàng)建一個(gè)SVG，我們必須是這個(gè)冗長(zhǎng)：

 document.createelementns（'http://www.w3.org/2000/svg'，'svg'）as svgsvgelement;

當(dāng)然，我們可以創(chuàng)建另一個(gè)輔助功能：

 const createsvgnSelement =（element：string）：svgelement => {
  返回document.createelementns（'http://www.w3.org/2000/svg'，element）;
};

當(dāng)我們將矩形附加到DOM時(shí)，我們必須注意它們的命令。否則，我們必須明確指定z索引。第一個(gè)矩形必須是最大的，最後一個(gè)矩形必須是最小的。最好在循環(huán)之前對(duì)數(shù)據(jù)進(jìn)行分類(lèi)。

 const data = rawdataset.sort（
  （a：datasetEntry，b：datasetEntry）=> b.value -a.value
）；

data.foreach（（D：DATASETENTRY，index：number）=> {
  const rect：svgrectelement = keresvgnSelement（'rect'）作為svgrectelement;
  const rectdimension：number = remapdatasetValuetosvgdimension（d.Value）;

  rect.setAttribute（'width'，`$ {rectDimension}`）;
  rect.setAttribute（'height'，`$ {rectDimension}`）;
  rect.setAttribute（'y'，`$ {svgdimension -rectDimension}`）;

  svg.appendchild（rect）;
}）;

坐標(biāo)係從左上角開(kāi)始；那就是[0，0]在哪裡。我們總是要從左側(cè)繪製矩形?？刂扑轿恢玫腦屬性默認(rèn)為0，因此我們不必設(shè)置它。 Y屬性控制垂直位置。

為了給人以視覺(jué)印象：所有矩形都源於觸摸其左下角的同一點(diǎn)，我們必須將矩形向下推下。多少錢(qián)？矩形不填充的確切量。該值是圖表的維度和特定矩形之間的差異。如果我們將所有位放在一起，我們最終都會(huì)得到這樣做：

我們已經(jīng)使用CSS添加了該動(dòng)畫(huà)的代碼。

切割矩形

我們必須將矩形變成不規(guī)則的形狀，看起來(lái)像是第七名，或者字母L旋轉(zhuǎn)180度。

如果我們專(zhuān)注於“丟失的零件”，那麼我們可以看到它們切入了我們已經(jīng)與之合作的相同矩形。

我們想隱藏那些切口。這就是我們最終要獲得想要的L形狀的方式。

掩蓋101

掩模是您定義的東西，然後應(yīng)用於元素。通常，掩碼在其屬於的

 <svg>
  <mask>
    
  </mask>
</svg>

在標(biāo)籤中，我們將形狀作為實(shí)際面具。我們還將蒙版屬性應(yīng)用於元素。

 <svg>
  <mask>
    
  </mask>
  <rect mask="“" url> </rect>
</svg>

這不是定義或塗上口罩的唯一方法，但這是該演示的最直接方法。讓我們?cè)诰帉?xiě)任何代碼以生成口罩之前進(jìn)行一些實(shí)驗(yàn)。

我們說(shuō)，我們想覆蓋與現(xiàn)有矩形大小相匹配的切口區(qū)域。如果我們採(cǎi)用最大的元素，並且將先前的矩形應(yīng)用於掩模，我們最終以此代碼：

 <svg viewbox="“" width="“" height="“">
  <mask>
    <rect width="“" height="“" y="“" fill="“”"> </rect>
  </mask>
  <rect width="“" height="“" y="“" fill="“＃264653”" mask="“" url> </rect>
</svg>

蒙版內(nèi)的元素需要一個(gè)填充值。那應(yīng)該是什麼？我們會(huì)根據(jù)選擇的填充值（顏色）看到完全不同的結(jié)果。

白色填充

如果我們?yōu)樘畛涫褂冒咨?，那麼我們就會(huì)得到：

現(xiàn)在，我們的大矩形與掩蔽矩形相同。不完全是我們想要的。

黑色填充

如果我們使用黑色值，則看起來(lái)像這樣：

我們什麼都沒(méi)有。那是因?yàn)槌錆M(mǎn)黑色的東西變得不可見(jiàn)。我們使用白色和黑色填充物控制面具的可見(jiàn)性。虛線(xiàn)作為視覺(jué)輔助，以引用無(wú)形區(qū)域的尺寸。

灰色填充

現(xiàn)在，讓我們使用白色和黑色之間的東西，說(shuō)格雷：

它既不是完全不透明的也不是堅(jiān)固的；這是透明的。因此，現(xiàn)在我們知道我們可以使用與白色和黑色值不同的東西來(lái)控制這裡的“可見(jiàn)度”，這是一個(gè)很好的技巧，可以保留在我們的後口袋中。

最後一點(diǎn)

到目前為止，這是我們涵蓋和了解的有關(guān)面具的知識(shí)：

• 內(nèi)部的元素控制蒙版區(qū)域的尺寸。
• 我們可以使蒙版區(qū)域的內(nèi)容可見(jiàn)，看不見(jiàn)或透明。

我們只為掩模使用了一種形狀，但是與任何通用HTML標(biāo)籤一樣，我們可以根據(jù)需要在其中嵌套盡可能多的子元素。實(shí)際上，實(shí)現(xiàn)我們想要的目標(biāo)的訣竅是使用兩個(gè)SVG 元素。我們必須將它們堆放在另一個(gè)上方：

 <svg viewbox="“" width="“" height="“">
  <mask>
    <rect width="“" height="“" y="“" fill="“"> </rect>
    <rect width="“" height="“" y="“" fill="“"> </rect>
  </mask>
  <rect width="“" height="“" y="“" fill="“＃264653”" mask="“" url> </rect>
</svg>

我們的掩蔽矩形之一充滿(mǎn)了白色。另一個(gè)充滿(mǎn)黑色。即使我們知道規(guī)則，也要嘗試一下可能性。

 <mask>
  <rect width="“" height="“" y="“" fill="“" black> </rect>
  <rect width="“" height="“" y="“" fill="“" white> </rect>
</mask>

是最大元素的維度，最大元素充滿(mǎn)了黑色。這意味著該區(qū)域下的一切都是看不見(jiàn)的。較小的矩形下的一切都是可見(jiàn)的。

現(xiàn)在讓我們對(duì)黑色矩形頂部的東西進(jìn)行翻轉(zhuǎn)：

 <mask>
  <rect width="“" height="“" y="“" fill="“" white> </rect>
  <rect width="“" height="“" y="“" fill="“" black> </rect>
</mask>

這就是我們想要的！

最大的白色矩形下的所有內(nèi)容都是可見(jiàn)的，但是較小的黑色矩形在其頂部（在Z軸上更靠近我們），掩蓋了這一部分。

生成口罩

現(xiàn)在我們知道了我們必須做什麼，我們可以相對(duì)輕鬆地創(chuàng)建口罩。這類(lèi)似於我們首先生成彩色矩形的方式 - 我們創(chuàng)建了一個(gè)輔助環(huán)，在其中創(chuàng)建掩碼和兩個(gè)矩形。

這次，我們沒(méi)有將矩形直接附加到SVG上，而是將其附加到蒙版：

 data.foreach（（D：DATASETENTRY，index：number）=> {
  constmask：svgMaskElement = svgmaskelement; createSvgnSelement（'mask'）;

  const rectdimension：number = remapdatasetValuetosvgdimension（d.Value）;
  const rect：svgrectelement = keresvgnSelement（'rect'）作為svgrectelement;

  rect.setAttribute（'width'，`$ {rectDimension}`）;
  // ...設(shè)置其餘屬性...

  mask.setAttribute（'id'，`maskw $ {rectDimension.tofixed（）}`）;

  mask.appendchild（rect）;

  // ...創(chuàng)建和設(shè)置較小矩形的屬性...

  svg.appendchild（蒙版）;
}）;

data.foreach（（D：DATASETENTRY，index：number）=> {
    // ...我們的代碼生成彩色矩形...
}）;

我們可以將索引用作面具的ID，但這似乎是一個(gè)更可讀的選擇，至少對(duì)我而言：

 mask.setAttribute（'id'，`maskw $ {rectDimension.tofixed（）}`）; // MaskW320，MASW240，...

至於在面罩中添加較小的矩形，我們可以輕鬆訪(fǎng)問(wèn)所需的值，因?yàn)槲覀円郧坝嗁?gòu)了從最高到最低的矩形值。這意味著循環(huán)中的下一個(gè)元素是較小的矩形，我們應(yīng)該引用一個(gè)元素。我們可以通過(guò)其索引來(lái)做到這一點(diǎn)。

 // ...上一部分我們創(chuàng)建了蒙版和矩形...

const smalleRectIndex =索引1;

//當(dāng)我們處?kù)蹲钚r(shí)，沒(méi)有下一個(gè)
if（data [smalleRectIndex]！== undefined）{
  const smalleRectDimension：number = remapdatasetValuetosvgdimension（
    數(shù)據(jù)[SmalleRectIndex]
  ）；
  const smallErcret：svgrectelement = createSvgnSelement（
    'rect'
  ）作為svgrectement;

  // ...設(shè)置矩形屬性...

  mask.AppendChild（SmallerRect）;
}

svg.appendchild（蒙版）;

剩下的就是將蒙版屬性添加到我們?cè)佳h(huán)中的彩色矩形中。它應(yīng)該匹配我們選擇的格式：

 rect.setAttribute（'mask'，`url（＃baskw $ {rectdimension.tofixed（）}）`）; // maskW320，maskW240，...

最終結(jié)果

我們完成了！我們已經(jīng)成功製作了一個(gè)由嵌套正方形製成的圖表。它甚至在鼠標(biāo)懸停上分開(kāi)。而所需的只是使用元素來(lái)繪製每個(gè)正方形的切口區(qū)域的SVG。

以上是如何使用口罩創(chuàng)建嵌套正方形的動(dòng)畫(huà)圖表的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！