D3.js schemeSet2 方法(1)

📌 相关文章

📜 D3.js schemeSet2 方法(1)

📅 最后修改于: 2023-12-03 14:40:34.804000 🧑 作者: Mango

D3.js schemeSet2 方法

介绍

D3.js 是一个数据可视化的 JavaScript 库，其中的 schemeSet2 方法能够生成一组颜色方案，该方法返回一个数组，包含一组颜色字符串。

语法

d3.schemeSet2

返回值

该方法返回一个包含以下十个颜色的数组：

["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd"]

示例

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3.js schemeSet2 方法示例</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <script>
    var color = d3.scaleOrdinal(d3.schemeSet2);
    console.log(color("Category A")); // #8dd3c7
    console.log(color("Category B")); // #ffffb3
    console.log(color("Category C")); // #bebada
  </script>
</body>
</html>

结果

#8dd3c7
#ffffb3
#bebada

说明

我们使用 d3.scaleOrdinal 方法创建一个序数比例尺，并将 d3.schemeSet2 作为参数传递。然后，我们使用该比例尺将字符串值映射为颜色字符串。