字符串离散域的连续色标？

Question

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

给定起始颜色d3.rgb("蓝色")和结束颜色d3.rgb("红色"),如何构建将字符串的离散域映射到连续颜色范围的颜色比例？

我试过了

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*或HCL色彩空间中进行插值以获得准确的感知.您可以使用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)));