如何使用CSS在线字体和D3实现Google的信息图

2024-01-17 14:12 小编
 源代码下载
    https://github.com/comehope/front-end-daily-challenges
    代码解读
    定义dom,只有1个空元素,其中不包含任何文本:
    <divclass="logo"></div>
    引入字体文件,ProductSans是Google专门为品牌推广创建的无衬线字体:
    @importurl("https://fonts.googleapis.com/css?family=Product+Sans");
    居中显示:
    body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    用伪元素制作logo,注意content的内容不是"Google",而是"google_logo":
    .logo::before{
    content:'google_logo';
    font-size:10vw;
    }
    设置字体,采用刚才引入的在线字体,刚才页面上的"google_logo"文字被替换成了单色的logo图案:
    body{
    font-family:'productsans';
    }
    定义颜色变量:
    :root{
    --blue:#4285f4;
    --red:#ea4335;
    --yellow:#fbbc05;
    --green:#34a853;
    }
    设置文字遮罩效果,为文字上色:
    .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制作完成,接下来制作googol信息,说明Google的名字来源于含义是1后面跟100个零的大数的单词googol。
    在dom中添加一行说明文本和容纳数字的容器,容器中包含5个数字,在每个数字的内联样式中指定了颜色变量:
    <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>
    设置说明文本的样式:
    .desc{
    font-size:1.5vw;
    font-weight:normal;
    color:dimgray;
    margin-top:2em;
    }
    设置数字的样式:
    .zeros{
    font-size:3vw;
    font-weight:bold;
    margin-top:0.2em;
    text-align:center;
    width:25.5em;
    word-wrap:break-word;
    }
    为数字上色:
    .zerosspan{
    color:var(--c);
    }
    微调数字"1"的边距,让它不要和后面的"0"靠得太紧:
    .zerosspan:nth-child(1){
    margin-right:0.2em;
    }
    至此,静态布局完成,接下来用d3批量处理数字。
    引入d3库,并删除掉dom中.zeros的数字子元素:
    <scriptsrc="https://d3js.org/d3.v5.min.js"></script>
    最终我们会在页面上显示100个0,每个0的颜色都不同,并且为了美观,相邻数字的颜色也要不同。
    所以,先定义一个获取颜色的函数,它可以从Googlelogo配色的4种颜色中取任意一个颜色,并且有一个表示被排除颜色的参数,当指定的此参数时,就从4个可选的颜色中去掉这个颜色,然后从剩下的3个颜色中随机取一个颜色:
    functiongetColor(excludedColor){
    letcolors=newSet(['blue','red','yellow','green'])
    colors.delete(excludedColor)
    returnArray.from(colors)[Math.floor(d3.randomUniform(0,colors.size)())]
    }
    然后,定义2个常量,ZEROS是存储100个0的数组,ONE是存储数字1的对象,它有2个属性,number表示它的数值是1,color表示它的颜色是蓝色:
    constZEROS=d3.range(100).map(x=>0)
    constONE={number:1,color:'blue'}
    接下来,通过用reduce函数遍历ZEROS数组,返回一个新的数组numbers,它有101个元素(1以及跟随它的100个0),每个元素都是1个包含number和color属性的对象:
    letnumbers=ZEROS.reduce(function(numberObjects,d){
    numberObjects.push({
    number:d,
    color:getColor(numberObjects[numberObjects.length-1].color)
    })
    returnnumberObjects
    },[ONE])
    然后,以numbers为数据源,用d3批量创建出dom元素,并且把颜色信息写在行内样式中:
    d3.select('.zeros')
    .selectAll('span')
    .data(numberObjects)
    .enter()
    .append('span')
    .style('--c',(d)=>`var(--${d.color})`)
    .text((d)=>d.number)
    最后,微调一下内容的边距,使整个内容居中:
    .logo{
    margin-top:-10vh;
    }


Tag: 如何 信息
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码