9

我正在实现一个热图，其中单元格背景颜色由 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") ] );

这显然是行不通的。

4

3 回答 3

31

首先，我会考虑使用现成的 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)));
于 2012-08-31T21:22:43.937 回答
3

你有正确的想法，你只需要处理每个 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();
}

根据d3 文档r，您可以使用颜色对象的、g和b属性提取每个颜色通道：

# d3.rgb(color)

通过解析指定的颜色字符串构造新的 RGB 颜色。如果 color 不是字符串，则强制转换为字符串；因此，此构造函数还可用于创建现有颜色的副本，或强制将 d3.hsl 颜色转换为 RGB。

...

生成的颜色存储为 [0,255] 范围内的红色、绿色和蓝色整数通道值。通道可用作返回对象的 r、g 和 b 属性。

因此，在上面示例的顶部，您可以说：

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

这有帮助吗？

于 2012-08-31T15:00:36.290 回答
0

您始终可以链接序数比例和线性比例。

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

像这样的东西：

// Your categories
var data = ["6TH", "7TH", "5TH", "4TH"],

  // Define ordinal to linear scale...
  ordinal = d3.scale.ordinal().domain(data).rangePoints([0, 1]),

  // ...and linear to color scale
  linear = d3.scale.linear().domain([0, 1]).range([d3.rgb("blue"), d3.rgb("red")]);

// Now define your artificial 'compound' scale
function scale(d) {
  return linear(ordinal(d));
}

// And then use it on your D3 code
d3.selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('background', scale) // <- et voilà ;)
  .text(function(d) {
    return d;
  });
div {
  color: white;
  width: 3em;
  padding: 1em;
  margin: .2em
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

于 2017-05-09T17:35:43.850 回答