介绍d3.scale.category20c v4

简介

d3.scale.category20c v4 是 D3.js 中的一个比例尺函数，用于将带有分类变量的数据映射到一组颜色上。它提供了一组预定义的20种颜色，可用于呈现数据中的不同类别。

使用方法

d3.scale.category20c v4 主要用于生成颜色比例尺。可以通过以下方法进行使用：

var colorScale = d3.scale.category20c();
colorScale("category1"); // 返回rgb(31, 119, 180)
colorScale("category2"); // 返回rgb(255, 127, 14)

在这个例子中，生成了一个基本的比例尺 colorScale，并通过 category1 和 category2 进行调用得到相应的颜色值。

修改颜色数量

如果需要更少的颜色数量，可以使用 category10 或 category20，它们分别提供了10种和20种颜色。

var colorScale = d3.scale.category10();
colorScale("category1"); // 返回rgb(31, 119, 180)

修改返回颜色格式

默认情况下，d3.scale.category20c v4 返回的是 rgb 格式的颜色值。如果需要返回其他格式的颜色值，可以使用 D3.js 中提供的相应函数进行转换。

var colorScale = d3.scale.category20c();
d3.hsl(colorScale("category1")); // 返回hsl(215, 0.567, 0.486)

这里通过 d3.hsl 将 rgb 格式的颜色值转换成了 hsl 格式。

示例

以下是一个使用 d3.scale.category20c v4 的示例。这个示例将使用 category20c 将一个随机数据集中的数据点以不同颜色进行呈现。

var data = [];
for (var i = 0; i < 100; i++) {
  data.push({
    x: Math.random(),
    y: Math.random(),
    category: "category" + Math.floor(Math.random() * 20)
  });
}

var colorScale = d3.scale.category20c();

d3.select("svg")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d.x * 500;
  })
  .attr("cy", function(d) {
    return d.y * 500;
  })
  .attr("r", 5)
  .style("fill", function(d) {
    return colorScale(d.category);
  });

这里生成了100个数据点，每个数据点有一个 x 和 y 坐标和一个分类变量 category。然后使用 d3.scale.category20c() 生成颜色比例尺 colorScale，将 category 变量传入比例尺中得到相应的颜色值，最后将数据点以不同颜色呈现在 svg 中。

参考文献

1. d3.scale.category20c(). https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#category20c
2. D3.js categorical color scales. https://www.d3-graph-gallery.com/graph/custom_color.html