javascript - 在 d3.js v4 中创建 asinh(反双曲正弦)标度

Question

这将替代对数刻度，以便它可以处理负数。虽然我一直在尝试使用 d3 的对数刻度源作为起点，但还没有看到很多自定义刻度的例子。

Answer 1

据我所知，没有办法在 D3 中制作自定义比例(至少不是您正在寻找的那种感觉)。所有 D3 尺度都分两步缩放:

1. 使用域，在给定反插值函数的情况下对输入进行反插值
2. 使用范围，对步骤1的中间结果进行插值以获得输出

我相信您的理想答案基本上可以回答这个问题，“如何将 D3 刻度的去插值函数设置为自定义函数？”，我认为目前这不可能。

但是，您可以设置插值功能。 Mike Bostock 的这个示例展示了如何使用 D3 的内置缓动函数之一设置插值: http://bl.ocks.org/mbostock/56ea94205411ee9e4dbec3742f7ad08c

该示例具有“鱼眼镜头”效果，这可能与您想要的相反。您可以使用指数小于 1 的多项式缓动函数 d3.easePolyInOut 来获得更接近对数缩放的值(请参阅我的代码片段)。不幸的是，没有“logInOut”或“asinhInOut”，因此如果您需要更陡峭的滚降(比多项式)，那么您将不得不编写自己的缓动/插值函数。

var data = Array.from(Array(21), (_,i)=>{return 10*(i-10)})

var svg = d3.select("svg"),
    margin = {top: 50, right: 20, bottom: 5, left: 20},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var polyexp = 0.25

var x = d3.scaleLinear()
    .domain([-100,100])
    .range([0, width])
    .interpolate(easeInterpolate(d3.easePolyInOut.exponent(polyexp)));

g.append("g")
    .attr("class", "axis axis--x")
    .call(d3.axisBottom(x));

g.selectAll("circle").data(data).enter().append("circle")
  .attr("cx", (d) => x(d))
  .attr("cy", -10)
  .attr("r", 3)
  .attr("fill", "steelblue")

function easeInterpolate(ease) {
  return function(a, b) {
    var i = d3.interpolate(a, b);
    return function(t) {
      return i(ease(t));
    };
  };
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<svg width="600" height="100"></svg>