D3：将两个色标合二为一

Question

我目前有两个变量，我可以将它们映射到两个色标 s1 和 s2 上的两种不同颜色。 s1 为我提供了与我的变量 X 的值相对应的红色阴影（4 种不同的可能颜色）。 s1 为我提供了与变量 Y 的值相对应的蓝色阴影（也有 4 种不同的可能颜色）。

现在我想得到的是允许我将这两者结合起来以获得变量组合的独特颜色的东西。因此，对于一对 (X,Y)，我在刻度上得到了一种颜色。所以我得到了 16 种可能的颜色。

这是一个说明我正在寻找的东西的传说：

我一直在查看在线示例，但不知道如何实现。

Answer 1

您可以很容易地将两个阈值尺度组合成一个新的尺度函数。该函数的核心可能如下所示：

d3.scaleBivariate = function() {
  function scaleBivariate(value) {
    var r = reds(value[0]);
    var b = blues(value[1]);

    return "rgb("+r+","+((r+b)/2)+","+b+")";
  }

  var blues = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);

  var reds = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);

  return scaleBivariate;

}

这将借助两个 d3 阈值标度设置红色和蓝色通道。绿色只是设置为两者之间的平均值，尽管您可以将其设置为任何需要的值，例如 0 或其他两个通道的最小值。我的红/蓝范围是任意的，也很容易改变。

以上可以用作：

d3.scaleBivariate = function() {
  function scaleBivariate(value) {
    var r = reds(value[0]);
    var b = blues(value[1]);

    return "rgb("+r+","+((r+b)/2)+","+b+")";
  }

  var blues = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);
        
  var reds = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);
        
  return scaleBivariate;

}

// Dummy data:
var data = d3.range(16).map(function(d) {
  return {x: d%4, y: Math.floor(d/4) }
})


var svg = d3.select("svg");
var size = 30;

var color = d3.scaleBivariate();

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return d.x * size })
  .attr("y", function(d) { return d.y * size })
  .attr("width",size)
  .attr("height",size)
  .attr("fill",function(d) {
    return color([d.x,d.y]);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>

<svg></svg>

当然，您可能希望通过添加方法来修改哪些基准属性设置哪些颜色与哪些属性相关联、阈值应该是什么等来增加一些灵活性。为了提供一个基本示例，下面的示例添加了访问器设置应该映射到蓝色和红色通道的属性：

d3.scaleBivariate = function() {

  function scaleBivariate(value) {
     var r = reds(red(value));
     var b = blues(blue(value));
     return "rgb("+r+","+((r+b)/2)+","+b+")";
  }
  
  var blues = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);
    
  var reds = d3.scaleThreshold()
    .range([255,205,155,105,55])
    .domain([0,1,2,3,4,5]);
    
  var red = function(d) { return d[0]; }
  
  var blue = function(d) { return d[1];}
  
  // Accessors:
  scaleBivariate.red = function(_) {
    return arguments.length ? (red = _, scaleBivariate): red;
  }
  
  scaleBivariate.blue = function(_) {
    return arguments.length ? (blue = _, scaleBivariate): blue;  
  }
  
  return scaleBivariate;
}

var data = d3.range(16).map(function(d) {
  return {x: d%4, y: Math.floor(d/4) }
})

var svg = d3.select("svg");
var size = 30;

// set up the color scale:
var color = d3.scaleBivariate()
  .red(function(d) { return d.x; })
  .blue(function(d) { return d.y; });

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return d.x * size })
  .attr("y", function(d) { return d.y * size })
  .attr("width",size)
  .attr("height",size)
  .attr("fill",color);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>

<svg></svg>