javascript – 在d3.js v4中创建一个asinh(反双曲正弦)量表

这将是一个日志量表的替代,以便它可以处理负数.没有看到很多自定义尺度的例子,尽管我一直在尝试使用d3的对数刻度的源作为起点.

解决方法

据我所知,没有办法在D3中进行自定义刻度(至少不是在你想要的意义上).所有D3尺度分为两个步骤：

>使用域,去插入给定一个去插值函数的输入
>使用范围,插入来自步骤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>

原文地址：https://www.jb51.cc/js/153149.html