javascript - 线性+阈值统一尺度

Question

我想构建一个有点复杂的轴，它可以处理线性数据到像素位置，直到某个值，在该值中所有内容都被归入一个类别，因此具有相同的数据到像素值。例如，考虑具有以下刻度线的 y 轴:

0%, 10%, 20%, 30%, 40%, 50%+

在这种情况下，所有高于 50% 的数据在绘制时将具有相同的 y 值。

这是一个相当常见的图表结构，但我还没有看到 d3 实现，这使得它很难从发射台上下来。我最初认为我可以使用 d3.scaleOrdinal() 或 d3.scaleThreshold，但是这样做会丢失数据中的关键细微差别。在我的数据集中，保留小数点(以及不是 10 的完美增量的数字)并精确绘制它们非常重要。据我所知，这只能通过 d3.scaleLinear() 实现。

我的下一个想法是通过使用两个彼此相邻的分离轴来创建它，以创建线性+阈值统一比例尺的错觉。

var xScaleLinear = d3.scaleLinear()
    .range([0,500])

var xScaleThreshold = d3.scaleThreshold()
    .range([500,520])

虽然这在理论上可行，但它意味着其余代码会出现很多复杂情况。绘制数据点时，每个数据点都需要一个 if 语句，该语句指向两个完全不同的比例调用。更不用说我必须添加一堆美学上的调整，比如只删除线性刻度的右端刻度，等等。

问题

d3 能否提供任何东西来帮助开发人员以更具可扩展性的方式统一规模？还是我应该预料到需要诉诸偷偷摸摸的/临时解决方案？

Answer 1

使用 scale.clamp 可以轻松将超过 50% 的所有内容 chop 为 50% 的值:

const scale = d3.scaleLinear()
  .domain([0, 0.5])
  .range([0, 500])
  .clamp(true);

d3.range(11).map(d => console.log(d * 10 + "% in the scale is: " + scale(d / 10)))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

另一方面，如果您想为超出限制的域值设置一个不同范围，只需设置一个域和一个具有中间值的范围。例如，这里的常规域(从 0 到 50%)在范围内从 0 到 500，所有超过 50% 的都将定位在 520:

const scale = d3.scaleLinear()
  .domain([0, 0.5, (0.5 + 1e-6), 1])
  .range([0, 500, 520, 520]);

d3.range(11).map(d=>console.log(d * 10 + "% in the scale is: " + scale(d/10)))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>