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

Question

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

Answer 1

据我所知,没有办法在D3中制作自定义刻度(至少不是你想要的意义).所有D3刻度分两步缩放:

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

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

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

这个例子有一个"鱼眼镜头"效果,这可能与你想要的相反.您可以使用多项式缓动函数,d3.easePolyInOut使用小于1的指数来获得更接近日志缩放的内容(请参阅我的代码片段).不幸的是,没有"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>

Answer 2

文档中最好的例子似乎是比例的插值功能。请参阅https://github.com/d3/d3-scale/blob/master/README.md#continuous-scales

var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"])
    .interpolate(d3.interpolateHcl);

我并不是真正的 d3 专家，所以我希望这会有所帮助。