在d3.js v4中创建asinh（反双曲正弦）标度 [英] Creating an asinh (inverse hyperbolic sine) scale in d3.js v4

问题描述

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

This would be a replacement for a log scale so that it can deal with negative numbers. Haven't seen many examples of custom scales though I've been trying to use d3's logarithmic scale's source as a starting point.

推荐答案

据我所知，没有办法在D3中制作自定义刻度（至少不是你想要的意义）。所有D3刻度分两步缩放：

As far as I know there are no ways to make custom scales in D3 (at least not in the sense you are looking for). All D3 scales scale in two steps:

1. 使用域，在给出去插值函数的情况下对输入进行去插值


2. 使用范围，插入步骤1的中间结果以获得输出

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

I believe your ideal answer would basically answer the question, "how do I set a D3 scale's deinterpolation function to a custom function?", and I don't think this is currently possible.

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

However, you can set the interpolate function. This example from Mike Bostock shows how to set the interpolation using one of D3's built in ease functions: http://bl.ocks.org/mbostock/56ea94205411ee9e4dbec3742f7ad08c

这个例子有一个鱼眼镜头的效果，这可能与你要。你可以使用多项式缓动函数 d3.easePolyInOut ，指数小于1来得到更接近日志缩放的东西（参见我的代码片段）。不幸的是，没有logInOut或asinhInOut，所以如果你需要更陡峭的滚降（比多项式），那么你必须编写自己的缓动/插值函数。

That example kinda has a "fisheye lens" effect, which is probably the opposite of what you want. You can use the polynomial easing function, d3.easePolyInOut, with an exponent less than one to get something closer to log scaling (see my code snippet). Unfortunately, there is no "logInOut" or "asinhInOut", so if you need a steeper rolloff (than polynomial), then you'll have to write your own easing/interpolation function.

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>

这篇关于在d3.js v4中创建asinh（反双曲正弦）标度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！