怎么用CSS在線字體和D3實(shí)現(xiàn)Google的信息圖

這篇文章給大家分享的是有關(guān)怎么用CSS在線字體和D3實(shí)現(xiàn)Google的信息圖的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　代碼解讀

　　定義dom，只有1個(gè)空元素，其中不包含任何文本：

　　<divclass="logo"></div>

　　引入字體文件，ProductSans是Google專門為品牌推廣創(chuàng)建的無(wú)襯線字體：

　　@importurl("https://fonts.googleapis.com/css?family=Product+Sans");

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　}

　　用偽元素制作logo，注意content的內(nèi)容不是"Google"，而是"google_logo"：

　　.logo::before{

　　content:'google_logo';

　　font-size:10vw;

　　}

　　設(shè)置字體，采用剛才引入的在線字體，剛才頁(yè)面上的"google_logo"文字被替換成了單色的logo圖案：

　　body{

　　font-family:'productsans';

　　}

　　定義顏色變量：

　　:root{

　　--blue:#4285f4;

　　--red:#ea4335;

　　--yellow:#fbbc05;

　　--green:#34a853;

　　}

　　設(shè)置文字遮罩效果，為文字上色：

　　.logo::before{

　　background-image:linear-gradient(

　　toright,

　　var(--blue)0%,var(--blue)26.5%,

　　var(--red)26.5%,var(--red)43.5%,

　　var(--yellow)43.5%,var(--yellow)61.5%,

　　var(--blue)61.5%,var(--blue)78.5%,

　　var(--green)78.5%,var(--green)84.5%,

　　var(--red)84.5%,var(--red)100%

　　);

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　}

　　至此，Googlelogo制作完成，接下來(lái)制作googol信息，說(shuō)明Google的名字來(lái)源于含義是1后面跟100個(gè)零的大數(shù)的單詞googol。

　　在dom中添加一行說(shuō)明文本和容納數(shù)字的容器，容器中包含5個(gè)數(shù)字，在每個(gè)數(shù)字的內(nèi)聯(lián)樣式中指定了顏色變量：

　　<pclass="desc">ThenameofGoogleoriginatedfromamisspellingoftheword"googol",thenumber1followedby100zeros.</p>

　　<pclass="zeros">

　　<spanstyle="--c:var(--blue);">1</span>

　　<spanstyle="--c:var(--red);">0</span>

　　<spanstyle="--c:var(--yellow);">0</span>

　　<spanstyle="--c:var(--blue);">0</span>

　　<spanstyle="--c:var(--green);">0</span>

　　</p>

　　設(shè)置說(shuō)明文本的樣式：

　　.desc{

　　font-size:1.5vw;

　　font-weight:normal;

　　color:dimgray;

　　margin-top:2em;

　　}

　　設(shè)置數(shù)字的樣式：

　　.zeros{

　　font-size:3vw;

　　font-weight:bold;

　　margin-top:0.2em;

　　text-align:center;

　　width:25.5em;

　　word-wrap:break-word;

　　}

　　為數(shù)字上色：

　　.zerosspan{

　　color:var(--c);

　　}

　　微調(diào)數(shù)字"1"的邊距，讓它不要和后面的"0"靠得太緊：

　　.zerosspan:nth-child(1){

　　margin-right:0.2em;

　　}

　　至此，靜態(tài)布局完成，接下來(lái)用d3批量處理數(shù)字。

　　引入d3庫(kù)，并刪除掉dom中.zeros的數(shù)字子元素：

　　<scriptsrc="https://d3js.org/d3.v5.min.js"></script>

　　最終我們會(huì)在頁(yè)面上顯示100個(gè)0，每個(gè)0的顏色都不同，并且為了美觀，相鄰數(shù)字的顏色也要不同。

　　所以，先定義一個(gè)獲取顏色的函數(shù)，它可以從Googlelogo配色的4種顏色中取任意一個(gè)顏色，并且有一個(gè)表示被排除顏色的參數(shù)，當(dāng)指定的此參數(shù)時(shí)，就從4個(gè)可選的顏色中去掉這個(gè)顏色，然后從剩下的3個(gè)顏色中隨機(jī)取一個(gè)顏色：

　　functiongetColor(excludedColor){

　　letcolors=newSet(['blue','red','yellow','green'])

　　colors.delete(excludedColor)

　　returnArray.from(colors)[Math.floor(d3.randomUniform(0,colors.size)())]

　　}

　　然后，定義2個(gè)常量，ZEROS是存儲(chǔ)100個(gè)0的數(shù)組，ONE是存儲(chǔ)數(shù)字1的對(duì)象，它有2個(gè)屬性，number表示它的數(shù)值是1，color表示它的顏色是藍(lán)色：

　　constZEROS=d3.range(100).map(x=>0)

　　constONE={number:1,color:'blue'}

　　接下來(lái)，通過(guò)用reduce函數(shù)遍歷ZEROS數(shù)組，返回一個(gè)新的數(shù)組numbers，它有101個(gè)元素（1以及跟隨它的100個(gè)0），每個(gè)元素都是1個(gè)包含number和color屬性的對(duì)象：

　　letnumbers=ZEROS.reduce(function(numberObjects,d){

　　numberObjects.push({

　　number:d,

　　color:getColor(numberObjects[numberObjects.length-1].color)

　　})

　　returnnumberObjects

　　},[ONE])

　　然后，以numbers為數(shù)據(jù)源，用d3批量創(chuàng)建出dom元素，并且把顏色信息寫在行內(nèi)樣式中：

　　d3.select('.zeros')

　　.selectAll('span')

　　.data(numberObjects)

　　.enter()

　　.append('span')

　　.style('--c',(d)=>`var(--${d.color})`)

　　.text((d)=>d.number)

　　最后，微調(diào)一下內(nèi)容的邊距，使整個(gè)內(nèi)容居中：

　　.logo{

　　margin-top:-10vh;

　　}

感謝各位的閱讀！關(guān)于“怎么用CSS在線字體和D3實(shí)現(xiàn)Google的信息圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！