javascript - d3正负对数刻度怎么写

Question

问题

我有正值和负值，我想在“对数”标度上绘制它们。

想象一个具有以下值的均匀间隔刻度的刻度:

-1000, -100, -10, -1, 0, 1, 10, 100, 1000

我想要 0，它被对数定义为 -Inf，这进一步复杂化了。

不过，我不认为这个要求是无理的。这似乎是任何数据科学家都可能想要绘制强烈不同值的合理比例。

如何在 d3 中创建这样的刻度和轴？

想法

使用 2 个 d3.scaleLog() 或 3 个尺度(如果您使用 a technique like this one)可能巧妙地做到这一点.

我希望有一种简单的方法可以将其放入 d3.scalePow() 和 .exponent(0.1) 但除非我有我的日志规则混淆，你不能从 .scalePow() 中得到一个 .scaleLog()(尽管你可能可以在某些范围内近似它)。

Answer 1

我们不能有像这样的真正对数刻度，甚至不能有像这样的两个对数刻度的组合。我们需要为零值设置一个截止值，根据您的数据，这可能会引入错误。否则，要制作这样的比例函数非常简单，只需为负值和正值调用不同的比例，同时将零值设置为零。

这种比例组合可能看起来像:

var positive = d3.scaleLog()
  .domain([1e-6,1000])
  .range([height/2,0])

var negative = d3.scaleLog()
  .domain([-1000,-1e-6])
  .range([height,height/2])

var scale = function(x) {
  if (x > 1e-6) return positive(x);
  else if (x < -1e-6) return negative(x);
  else return height/2; // zero value.
}

还有一个例子:

var width = 500;
var height = 300;

var positive = d3.scaleLog()
  .domain([1e-1,1000])
  .range([height/2,0])
  
var negative = d3.scaleLog()
  .domain([-1000,-1e-1])
  .range([height,height/2])
  
var scale = function(x) {
  if (x > 1e-6) return positive(x);
  else if (x < -1e-6) return negative(x);
  else return height/2; // zero value.
}

var line = d3.line()
  .y(function(d) { return scale(d) })
  .x(function(d,i) { return (i); })
  
var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height)
  
var data = d3.range(width).map(function(d) {
  return (d - 250) * 4;
})

svg.append("path")
  .attr("d", line(data) );

path {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

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

---

创建单一比例

以上可能是概念证明。

现在比较棘手的部分是制作轴。我们可以为上面的两个尺度制作轴，通过某种手动校正将零保留。但是以上面的例子为例，用我们自己的插值器创建一个比例尺会更容易。这给了我们一个尺度，我们可以为它创建一个轴。我们的插值器可能看起来像:

// Interpolate an output value:
var interpolator = function(a,b) {
  var y0 = a;
  var y1 = b;
  var yd = b-a;
  var k = 0.0001; 

  var positive = d3.scaleLog()
    .domain([k,1])
    .range([(y0 + y1)/2 ,y1])

  var negative = d3.scaleLog()
    .domain([-1,-k])
    .range([y0, (y1 + y0)/2])

  return function(t) { 
    t = (t - 0.5) * 2; // for an easy range of -1 to 1.
    if (t > k) return positive(t);
    if (t < -1 + k) return y0;
    if (t < -k) return negative(t);
    else return (y0 + y1) /2;
  }
}

然后我们可以将其应用于常规的老式 d3 线性刻度:

d3.scaleLinear().interpolate(interpolator)...

这会将域中的数字插入到我们指定的范围内。它主要采用上述内容并将其用作 d3 插值器:a,b 是域限制，t 是之间的规范化域0 和 1，以及 k 定义零值。有关 k 的更多信息，请参见下文。

要获得刻度，假设一个漂亮的圆形域只有漂亮的圆形基数 10，我们可以使用:

// Set the ticks:
var ticks = [0];
scale.domain().forEach(function(d) {
  while (Math.abs(d) >= 1) {
    ticks.push(d); d /= 10;
  }
})

应用这个我们得到:

var margin = {left: 40, top: 10, bottom: 10}
var width = 500;
var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width+margin.left)
  .attr("height",height+margin.top+margin.bottom)
  .append("g").attr("transform","translate("+[margin.left,margin.top]+")");

var data = d3.range(width).map(function(d) {
  return (d - 250) * 4;
})

// Interpolate an output value:
var interpolator = function(a,b) {
  var y0 = a;
  var y1 = b;
  var yd = b-a;
  var k = 0.0001; 
 
  var positive = d3.scaleLog()
    .domain([k,1])
	.range([(y0 + y1)/2 ,y1])

  var negative = d3.scaleLog()
    .domain([-1,-k])
	.range([y0, (y1 + y0)/2])
	
  return function(t) { 
	t = (t - 0.5) * 2; // for an easy range of -1 to 1.
	if (t > k) return positive(t);
	if (t < -1 + k) return y0;
	if (t < -k) return negative(t);
	else return (y0 + y1) /2;
  }
}

// Create a scale using it:
var scale = d3.scaleLinear()
  .range([height,0])
  .domain([-1000,1000])
  .interpolate(interpolator);
  
// Set the ticks:
var ticks = [0];
scale.domain().forEach(function(d) {
  while (Math.abs(d) >= 1) {
	ticks.push(d); d /= 10;
  }
})

// Apply the scale:
var line = d3.line()
  .y(function(d) { return scale(d) })
  .x(function(d,i) { return (i); })
  
// Draw a line:
svg.append("path")
  .attr("d", line(data) )
  .attr("class","line");

// Add an axis:
var axis = d3.axisLeft()
  .scale(scale)
  .tickValues(ticks)
  
svg.append("g").call(axis);

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

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

---

修改k值

Ok，k 怎么了。需要设置零值。 k 也会改变图形的形状。如果显示规则间隔的刻度，将 k 增加十倍会使最小刻度(零除外)的幅度增加十倍。在我上面的示例中，将 k 乘以 10 会将刻度线推到零刻度线之上的幅度为 1。将它除以 10 将为 0.1 刻度创造空间(当然这需要修改刻度生成器以显示该刻度)。 k 很难解释，所以我希望我在那里没问题。

我将演示以尝试更好地传达它。让我们使用上面的方法将最小幅度刻度设置为 0.1，我们将要修改刻度函数和 k:

var margin = {left: 40, top: 10, bottom: 10}
var width = 500;
var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width+margin.left)
  .attr("height",height+margin.top+margin.bottom)
  .append("g").attr("transform","translate("+[margin.left,margin.top]+")");

var data = d3.range(width).map(function(d) {
  return (d - 250) * 4;
})

// Interpolate an output value:
var interpolator = function(a,b) {
  var y0 = a;
  var y1 = b;
  var yd = b-a;
  var k = 0.00001; 
 
  var positive = d3.scaleLog()
    .domain([k,1])
	.range([(y0 + y1)/2 ,y1])

  var negative = d3.scaleLog()
    .domain([-1,-k])
	.range([y0, (y1 + y0)/2])
	
  return function(t) { 
	t = (t - 0.5) * 2; // for an easy range of -1 to 1.
	if (t > k) {return positive(t)};
	if (t < -1 + k) return y0;
	if (t < -k) return negative(t);
	else return (y0 + y1) /2 //yd;
  }
}

// Create a scale using it:
var scale = d3.scaleLinear()
  .range([height,0])
  .domain([-1000,1000])
  .interpolate(interpolator);
  
// Set the ticks:
var ticks = [0];
scale.domain().forEach(function(d) {
  while (Math.abs(d) >= 0.1) {
	ticks.push(d); d /= 10;
  }
})

// Apply the scale:
var line = d3.line()
  .y(function(d) { return scale(d) })
  .x(function(d,i) { return (i); })
  
// Draw a line:
svg.append("path")
  .attr("d", line(data) )
  .attr("class","line");

// Add an axis:
var axis = d3.axisLeft()
  .scale(scale)
  .tickValues(ticks)
  .ticks(10,".1f")
  
svg.append("g").call(axis);

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

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

如果您的定义域为 +/- 1000，并且您希望最小震级刻度为 1(不包括零)，您需要的 k 为 0.0001，即 0.1/1000。

如果域的正负限制不同，那么我们将需要两个 k 值，一个用于负截止值，一个用于正值截止值。

最后，

k 设置为零的值，在我的示例中，-k 和 +k 之间的 t 值设置为相同的 - 0。理想情况下，这不会是很多值数据集，但如果是，您可能会得到如下一行:

每个输入值都不同，但有许多零输出值，由于我认为是零的边界而产生视觉伪像。如果在零边界中只有一个值，就像我上面的例子(但不是上面的图片)，我们会得到一个更好的: