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

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

给定一个起始颜色d3.rgb（“蓝色”）和一个结束颜色d3.rgb（“红色”），我如何构建将离散的字符串域映射到连续颜色范围的颜色比例

我试过了

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

---

这显然不起作用。

您的想法是正确的，只需处理每个R/G/B颜色通道。例如，在vanilla JavaScript中，您可以执行以下操作：

var a = [255, 0, 0], // First color
    b = [0, 0, 255], // Other color
    bands = 5,       // Bands is the length of your domain
    i, 
    delta = [];      // Difference between color in each channel

// Compute difference between each color
for (i = 0; i < 4; i++){
  delta[i] = (a[i] - b[i]) / (bands + 1);
}

// Use that difference to create your bands
for (i = 0; i <= bands + 1; i++){
  var r = Math.round(a[0] - delta[0] * i);
  var g = Math.round(a[1] - delta[1] * i);
  var b = Math.round(a[2] - delta[2] * i);
  console.log("<div style='background-color: #" + dec2hex(r) + dec2hex(g) + dec2hex(b) + "'>Band " + i + "</div>");
}

// A helper function for formatting
function dec2hex(i) {
  return (i+0x100).toString(16).substr(-2).toUpperCase();
}

---

<>这有帮助吗？

< P>首先，我会考虑使用一种容易获得的色度表；看见这些文件也可以作为JavaScript和CSS文件在D3的git存储库中获得；看见例如，如果您的域中有四个离散值，并且您想要一个红蓝发散比例，您可以说：

var myColor = d3.rgb("blue"),
    a = [myColor.r, myColor.g, myColor.b],
...

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

（在此之前，您还需要一个

）Colorbrewer拥有多种精心设计的顺序、发散和分类色标

如果你坚持滚动你自己的色阶，我强烈建议插入以获得准确的感知。您可以使用或来执行此操作。例如，

d3.interpolateLab（“红色”、“蓝色”）（.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)));

---

始终可以链接顺序比例和线性比例

第一个比例将从离散值创建可量化的值，第二个比例将在颜色比例上插值这些值

大概是这样的：

//您的类别
var数据=[“第六”、“第七”、“第五”、“第四”]，
//定义有序到线性比例。。。
ordinal=d3.scale.ordinal（）.domain（data）.rangePoints（[0,1]），
//…与色阶呈线性关系
linear=d3.scale.linear（）.domain（[0,1]）.range（[d3.rgb（“蓝色”），d3.rgb（“红色”））；
//现在定义你的人工“复合”比例
功能量表（d）{
返回线性（序数（d））；
}
//然后在D3代码中使用它
d3.选择全部（'div'）
.数据（数据）
.输入（）
.append（'div'））
.style（'background'，scale）//更新：D3的Colorbrewer库已移动到存储库中。