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％的内容截断为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>

线性+阈值统一量表

问题

1 个答案: