Question

我想有一个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可以理解的标度，同时仍将数据保持为数字/浮点格式吗？ / p>

Answer 1

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

在您的情况下，您只需要传递适当的范围数组即可。请记住，如果域中有 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>

位置的门槛规模

问题

1 个答案: