D3.js - Colors API

สีจะแสดงโดยรวมแดงเขียวและน้ำเงิน สามารถระบุสีได้หลายวิธีดังนี้ -

  • ตามชื่อสี
  • เป็นค่า RGB
  • เป็นค่าเลขฐานสิบหก
  • เป็นค่า HSL
  • เป็นค่า HWB

d3-color API ให้การแสดงสีต่างๆ คุณสามารถดำเนินการแปลงและจัดการใน API ให้เราเข้าใจการดำเนินการเหล่านี้โดยละเอียด

การกำหนดค่า API

คุณสามารถโหลด API ได้โดยตรงโดยใช้สคริปต์ต่อไปนี้

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>

</script>

การทำงานขั้นพื้นฐาน

ให้เราดูการใช้งานสีพื้นฐานใน D3

Convert color value to HSL - ในการแปลงค่าสีเป็น HSL ให้ใช้ดังต่อไปนี้ Example -

var convert = d3.hsl("green");

คุณสามารถหมุนเฉดสีได้ 45 °ดังที่แสดงด้านล่าง

convert.h + =  45;

ในทำนองเดียวกันคุณสามารถเปลี่ยนระดับความอิ่มตัวได้เช่นกัน หากต้องการทำให้ค่าสีจางลงคุณสามารถเปลี่ยนค่าความทึบดังที่แสดงด้านล่าง

convert.opacity = 0.5;

วิธี API สี

ต่อไปนี้เป็นวิธีการ API สีที่สำคัญที่สุด

  • d3.color(specifier)
  • color.opacity
  • color.rgb()
  • color.toString()
  • color.displayable()
  • d3.rgb(color)
  • d3.hsl(color)
  • d3.lab(color)
  • d3.hcl(color)
  • d3.cubehelix(color)

ให้เราทำความเข้าใจเกี่ยวกับวิธีการ API สีเหล่านี้โดยละเอียด

d3.color (ตัวระบุ)

ใช้เพื่อแยกวิเคราะห์สี CSS ที่ระบุและส่งคืนสี RGB หรือ HSL หากไม่ได้ระบุตัวระบุระบบจะส่งคืนค่า null

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

<script>
   var color = d3.color("green");  // asign color name directly
   console.log(color);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอของเรา -

{r: 0, g: 128, b: 0, opacity: 1}

สีความทึบ

หากเราต้องการให้สีจางลงเราสามารถเปลี่ยนค่าความทึบได้ อยู่ในช่วง [0, 1]

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ -

1

color.rgb ()

จะคืนค่า RGB สำหรับสี ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอของเรา

{r: 0, g: 128, b: 0, opacity: 1}

color.toString ()

ส่งคืนสตริงที่แสดงสีตามข้อกำหนด CSS Object Model ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอของเรา

rgb(0, 128, 0)

color.displayable ()

ส่งคืนค่าจริงหากสามารถแสดงสีได้ ส่งคืนเท็จหากค่าสี RGB น้อยกว่า 0 หรือมากกว่า 255 หรือถ้าความทึบไม่อยู่ในช่วง [0, 1] ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอของเรา

true

d3.rgb (สี)

วิธีนี้ใช้เพื่อสร้างสี RGB ใหม่ ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl (สี)

ใช้เพื่อสร้างสี HSL ใหม่ ค่าจะแสดงเป็นคุณสมบัติ h, s และ l บนอินสแตนซ์ที่ส่งคืน ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ

330
0.5

d3.lab (สี)

มันสร้างสีห้องปฏิบัติการใหม่ ค่าของช่องจะแสดงเป็นคุณสมบัติ 'l', 'a' และ 'b' บนอินสแตนซ์ที่ส่งคืน

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl (สี)

สร้างสี HCL ใหม่ ค่าช่องแสดงเป็นคุณสมบัติ h, c และ l บนอินสแตนซ์ที่ส่งคืน ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix (สี)

สร้างสี Cubehelix ใหม่ ค่าจะแสดงเป็นคุณสมบัติ h, s และ l บนอินสแตนซ์ที่ส่งคืน ขอให้เราพิจารณาตัวอย่างต่อไปนี้.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

ตัวอย่างการทำงาน

ให้เราสร้างหน้าเว็บใหม่ - color.htmlเพื่อดำเนินการทุกวิธี API สี รายการรหัสที่สมบูรณ์ถูกกำหนดไว้ด้านล่าง

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้