Question

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

Answer 1

据我所知，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>

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专家，所以我希望有所帮助。

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

2 个答案: