javascript - 位置阈值范围

我希望有一个x轴，通过该轴可以通过阈值计算到像素位置的数据。我知道有here所示的颜色阈值，但是我无法找到与x / y轴相当的颜色。

我的数据如下所示：

{'aum':50,'inject':0,'sub':0},
{'aum':26,'inject':1,'sub':0},
{'aum':15,'inject':1,'sub':1}

aum的范围可以从0到70以上。因此，我想设置垃圾箱-即在我选择的三个阈值处标记垃圾箱。考虑下面的代码：

var xScale = d3.scaleThreshold()
    .domain([7,69,70])
    .range([0,width]);

在我的点状图中（仍在进行中），我想使用7,69,70+作为阈值的三个类别，但结果是所有圆圈都被撞在一起了。看来我上面的代码无法正常运行。

题

除了将数据重新编码为明显的类别（0表示小于7，1表示8-69，2表示70+），我还可以构造一个d3可以理解的标度，同时仍将数据保持为数字/浮点格式吗？

最佳答案

您可以将阈值标度与范围内的几乎任何值一起使用，无论是颜色（即字符串）还是坐标（即数字）。

在您的情况下，您只需要传递适当的范围数组即可。请记住，如果域中有N个元素，则范围中必须有N + 1个元素。此外，您在域中也不需要该[7,69,70]：这些值标记下一个bin的开始。因此，在您的情况下，域必须为[8, 70]。

这是一个演示：

var xScale = d3.scaleThreshold()
  .domain([7, 70])
  .range([0, 250, 500]);

console.log(xScale(4))
console.log(xScale(7))
console.log(xScale(30))
console.log(xScale(69))
console.log(xScale(100))

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

另外，由于您有一个width变量，并且希望将空间从0划分为width，因此可以动态创建范围。例如：

var width = 500;
var xScale = d3.scaleThreshold()
.domain([7, 20, 40, 55, 70]);

xScale.range(d3.range(xScale.domain().length + 1).map(d=>d*(width/xScale.domain().length)));

console.log(xScale(4))
console.log(xScale(7))
console.log(xScale(22))
console.log(xScale(45))
console.log(xScale(69))
console.log(xScale(300))

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