How to implement a set of colored lights using CSS and D3 (code attached)

This article brings you the content is about how to use CSS and D3 to implement a set of colored lights (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, which contains 9 elements representing 9 numbers:

<div class= "PI" >    <span>3</span>    <span>1</span>    <span>4</span >    <span>1</span>    <span>5</span>    <span>9</span>    <span >2</span>    <span>6</span>    <span>5</span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:black;}

Define Container Dimensions:

. Pi {    width:30em;    Height:30em;    font-size:12px;}

Layout 9 numbers into a grid of 3 * 3:

. Pi {    display:grid;    Grid-template-columns:repeat (3, 1FR);    Grid-gap:0.2em;}. Pi span {    color:white;    Font-size:3em;    BACKGROUND-COLOR:HSL (0, 40%, 40%);    Font-family:sans-serif;    border-radius:50%;    Display:flex;    Align-items:center;    Justify-content:center;    User-select:none;}

A CSS variable is defined in the DOM, and the value of the variable equals the number represented by the element:

<p class= "PI" >    <span style= "--d:3" >3</span>    <span style= "--d:1" >1</span>    <span style= "--d:4" >4</span>    <span style= "--d:1" >1</span>    <span style= "-- D:5 ">5</span>    <span style="--d:9 ">9</span>    <span style="--d:2 ">2</span>    <span style= "--d:6" >6</span>    <span style= "--d:5" >5</span></p>

Set different background colors for different numbers:

. Pi span {    --C:HSL (Calc (Var (--d)), 40%, 40%);    Background-color:var (--c);}

Make the color of the number the same as the background, when the mouse hovers, the height of the current number:

. Pi span {    color:var (--c);    transition:0.3s;}. Pi Span:hover {    background-color:white;    Color:black;    box-shadow:0 0 1em Yellow;}

At this point, the visual design is finished, and then the DOM elements and CSS variables are processed in bulk using D3.
Introducing the D3 Library:

<script src= "Https://d3js.org/d3.v5.min.js" ></script>

Delete the DOM element that represents the number in the HTML file, create a DOM element that represents the number with D3, and set the CSS variable:

Const PI = ' 314159265 ';d 3.select ('. Pi ').    selectall (' span ').    data (PI).    enter ()    . Append (' span ')    . Style ('--d ', (d) + = d)    . Text ((d) + D);

PIchange to 100-bit:

Const PI = ' 3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067 ' ;

At the same time, change the grid to a 10 * 10 layout:

. Pi {    grid-template-columns:repeat (1FR);}. Pi span {    font-size:1.3em;}

Next, make a loop-lit effect.

To add a CSS class for each number element, the class name of the number 0 is, the d0 class name of the number 1 is d2 , and so on:

D3.select ('. Pi ').    selectall (' span ').    data (PI).    enter ().    append (' span ')    . attr (' class ', (d) = > ' D${d} ').    style ('--d ', (d) = + D)    . Text ((d) + D);

Define the loop variable number , which gradually increments from 1:

let number = 1;

Defines a function that illuminates a set of elements for a specific number:

Function Show () {    d3.selectall ('. Pi span.d${number%} ')        . Classed (' show ', true);    D3.selectall ('. Pi span.d${(number-1)%} ')        . Classed (' show ', false);    number++;}

Finally, set a time interval, and repeatedly call the above function, so that each group of numbers in turn lit:

SetInterval (show, 500);

Done!