javascript - D3 反转色标图以获得幅度

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，但反转功能不适用于非数字值。如 https://github.com/d3/d3-scale 中所述 仅当范围是数字时才支持此方法。如果范围不是数字，则返回 NaN

问题:- 这与具有超过 10000 个数据点的大数据频谱图有关。 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>