javascript - D3 Inverting Color Scale Map 得到振幅

Question

我有一个 colorscaleMap 让我们假设这样的事情

d3.scale.linear()
 .domain([0.01,0.02,0.03,0.04,0.05])
 .range(["#5100ff", "#00f1ff", "#00ff30", "#fcff00", "#ff0000"])

现在我想使用反转功能

假设 invert("#5100ff") 并且我期望输出为 0.01，但 invert 功能不适用于非数字值。如 https://github.com/d3/d3-scale 中所述 仅当范围为数字时才支持此方法。如果范围不是数字，则返回 NaN

问题:-这与具有超过 10000 个数据点的大数据 Spectrogram 有关。 Y - 轴是频率，X 轴是时间，颜色代表振幅。我想写 Index 函数会很低效

有没有人能解决这个问题？

Answer 1

这不是一件容易的事，如果可能的话，最好通过使用绑定(bind)数据来避免这个问题。

但是，这是一个非常有趣的问题。在反转数字时，您至少会绑定(bind)到一个维度，数字将落在可插值的范围内(有一些特定的异常(exception))。对于三维色彩空间，这会变得有点困难，尤其是对于分段的域和范围。但是，即使我们抛开为比例尺无法产生的反转函数提供颜色，事情仍然很困难。

如前所述，d3-scale 不支持非数值反转，d3-interpolate 也不提供反转支持。我们也不能在连续尺度上拥有非数字域(这将提供最简单的解决方案)。如果不重写每个颜色插值器，任何解决方案都可能特定于某个插值(默认是每个 channel 上的线性插值，所以我将在下面使用它)。

如果我们能够解决上述问题，最后一个挑战是您无法拥有很高的精度:RGB channel 值四舍五入为 0 到 255 之间的 8 位数字。反转此数字会产生舍入误差。

这个舍入问题通常因许多色阶在任何给定 channel 上不使用 0 - 255 的完整范围这一事实而变得复杂。如果从红色变为橙色，变化最大的 channel 是绿色，变化为 165。这肯定会降低任何反转函数的精度。

也就是说，我们可以为具有颜色空间范围的比例制作简单的反转函数。这可能需要几个步骤:

1. 找到范围的最小值和最大值之间最大范围的颜色 channel (最小值和最大值分别为:a,b)。
2. 从需要反转的颜色中提取相同的颜色 channel :y。
3. 在 a 和 b 之间反插 y，得到 t
4. 取 t 并在尺度域的最小值和最大值之间进行插值

线性插值器如下所示:y = a + t * (b - a)

这样我们就可以反插值了:t = (y - a)/(b - a)

t 是一个介于 0 和 1 之间的数字，其中(当应用于插值器时)0 将在域中产生最小值，1 将在域中产生最大值。

这可能是这样的:

var scale = d3.scaleLinear()
  .domain([0,100])
  .range(["orange","red"])


 scale.invertColor = function(x) {
    // get the color into a common form
    var color = d3.color(x); 
    
    // do the same for the range:
    var min = d3.color(this.range()[0]);
    var max = d3.color(this.range()[1]);
	
    // find out which channel offerrs the greatest spread between min and max:
    var spreads = [max.r-min.r,max.g-min.g,max.b-min.g].map(function(d) { return Math.abs(d); });
    var i = spreads.indexOf(Math.max(...spreads));
    var channel = d3.keys(color)[i];
	
    // The deinterpolation function	
    var deinterpolate = function (value,a,b) {
      if(b-a==0) return 0;  
      return Math.abs((value - a) / (b - a))
    }

	// Get t
	var t = deinterpolate(color[channel],min[channel],max[channel]);

    // Interpolate between domain values with t to get the inverted value:
    return d3.interpolate(...this.domain())(t)

};
  

  
var test = [0,10,50,90,100];
console.log("Test values:");
console.log(test)
console.log("Scaling and then Inverting values:");
console.log(test.map(function(d) { return scale.invertColor(scale(d)); }));
console.log("Original values minus scaled and inverted values:");
console.log(test.map(function(d) { return (d - scale.invertColor(scale(d))); }));

<script src="https://d3js.org/d3.v5.min.js"></script>

以上是有限制的，你可以喂它任何颜色。它会为您插入一个值，即使该比例不能产生该值。

通过多次使用上述函数，可以很容易地为多个段修改它。我们可以检查每个段，看看是否有一个值一旦被反转后会按比例缩小到每个段的自身。通过这样做，只能反转比例尺产生的颜色:

var scale = d3.scaleLinear()
  .domain([0,100,200])
  .range(["orange","red","purple"])


scale.invertColor = function(x) {
  var domain = this.domain();
  var range = this.range();
		
  // check each segment to see if the inverted value scales back to the original value:
  for(var i = 0; i < domain.length - 1; i++) {
    var d = [domain[i], domain[i+1]];
    var r = [range[i], range[i+1]];
		  
    var inverted = (invert(x,d,r))
    if (d3.color(this(inverted)).toString() == d3.color(x).toString()) return inverted;		
  }
  return NaN;  // if nothing matched
		
		
  function invert(x,d,r) {
    // get the color into a common form
    var color = d3.color(x); 
        
    // do the same for the range:
    var min = d3.color(r[0]);
    var max = d3.color(r[1]);
    	
    // find out which channel offerrs the greatest spread between min and max:
    var spreads = [max.r-min.r,max.g-min.g,max.b-min.g].map(function(d) { return Math.abs(d); });
    var i = spreads.indexOf(Math.max(...spreads));
    var channel = d3.keys(color)[i];
    	
    // The deinterpolation function	
    var deinterpolate = function (value,a,b) {
      if(b-a==0) return 0;  
      return Math.abs((value - a) / (b - a))
    }

    // Get t
    var t = deinterpolate(color[channel],min[channel],max[channel]);

    // Interpolate between domain values with t to get the inverted value:
    return d3.interpolate(...d)(t)	
  }
		
};
      

      
    var test = [0,10,50,90,100,110,150,190,200];
    console.log("Test values:");
    console.log(test)
    console.log("Scaling and then Inverting values:");
    console.log(test.map(function(d) { return scale.invertColor(scale(d)); }));
    console.log("Original values minus scaled and inverted values:");
    console.log(test.map(function(d) { return (d - scale.invertColor(scale(d))); }));

<script src="https://d3js.org/d3.v5.min.js"></script>