javascript - 来自离散字符串域的连续色标？

Question

我正在实现一个热图，其中单元格背景颜色由 d3 色标确定。一些值是绝对值；它们的值可以是 N 个不同的任意字符串类型类别，例如 ["6TH", "7TH", "5TH", "4TH"]。

给定开始颜色 d3.rgb("blue") 和结束颜色 d3.rgb("red")，我如何构建将离散的字符串域映射到连续颜色范围的色标？

我试过了

var scale = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .rangeBands( [ d3.rgb("blue"), d3.rgb("red") ] );

这显然行不通。

Answer 1

首先，我会考虑使用一种现成的 Colorbrewer 量表；见colorbrewer2.org .这些也可以在 D3 的 git 存储库中作为 JavaScript 和 CSS 文件获得；见lib/colorbrewer .例如，如果您的域中有四个离散值，并且您想要一个红蓝发散比例，您可以说:

var color = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .range(colorbrewer.RdBu[4]);

(在此之前的某处您也需要 <script src="colorbrewer.js"></script>。)Colorbrewer 具有各种精心设计的顺序、发散和分类色标。

如果您坚持滚动自己的色标，我强烈建议在 L*a*b* or HCL color space 中进行插值为了准确的感知。您可以使用 d3.interpolateLab 执行此操作或 d3.interpolateHcl .例如，d3.interpolateLab("red", "blue")(.5)返回介于红色和蓝色之间的颜色。

要计算有序尺度范围的颜色，您可以使用插值器，或者您可能会发现临时线性尺度更方便。例如:

var categories = ["6TH", "7TH", "5TH", "4TH"];

var color = d3.scale.ordinal()
    .domain(categories)
    .range(d3.range(categories.length).map(d3.scale.linear()
      .domain([0, categories.length - 1])
      .range(["red", "blue"])
      .interpolate(d3.interpolateLab)));