Javascript 在d3中的n个数据点后绘制垂直线

我用d3绘制了一张图，x和y比例定义如下：

x = d3.scaleLinear().domain([30, 150]).range([0, width])
y = d3.scaleLinear().domain([0, 100]).range([height, 0])

我需要在25%的数据点后画一条垂直线。我的代码是这样的：

svg.append('line')
  .attr('x1', lowerLimit)
  .attr('y1', 0)
  .attr('x2', lowerLimit)
  .attr('y2', height)
  .style('stroke', 'red')

---

我的问题是，我不知道如何将

lowerLimit

x值设置为刻度中所有x值的25%。有人能帮忙吗？提前谢谢

你的问题不太清楚。当你说：

我需要在25%的数据点后画一条垂直线

你说的是，如果没有数据，是不可能计算的，不仅如此，而且对于每个不同的数据集，都会发生变化

如果您确实在谈论第一个四分位数，那么您必须这样做：

给定名为

data

的数据数组，您可以使用：

在下面的演示中，我将绘制100个点，并计算属性

x

的25个百分位数（第一个四分位数）：

var lowerLimit = d3.quantile(data, 0.25, function(d) {
    return d.x
});

控制台显示该值。查看演示：

var数据=d3.range（100.map）（（）=>({
x:Math.random（）*120+30，
y:Math.random（）*100
}));
var w=500，
h=160；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
x=d3.scaleLinear（）.domain（[30150]）.range（[20，w-20]）；
y=d3.scaleLinear（）.domain（[01100]）.range（[h-20,20]）；
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
var circles=svg.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，2）
.attr（“填充”、“teal”）
.attr（“cx”，d=>x（d.x））
.attr（“cy”，d=>y（d.y））；
var data=data.sort（（a，b）=>d3.升序（a.x，b.x））
var lowerLimit=d3.分位数（数据，0.25，函数（d）{
返回d.x
});
console.log（lowerLimit）；
append（'行'）
.attr（'x1'，x（下限））
.attr（'y1'，20）
.attr（'x2'，x（下限））
.attr（'y2'，h-20）
.style（'笔划'，'红色'）
svg.append（“g”）
.attr（“变换”、“平移（0）”+（h-20）+>）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“转换”、“翻译（20,0）”）
.呼叫（yAxis）
你的问题不清楚。当你说：

我需要在25%的数据点后画一条垂直线

你说的是，如果没有数据，是不可能计算的，不仅如此，而且对于每个不同的数据集，都会发生变化

如果您确实在谈论第一个四分位数，那么您必须这样做：

给定名为
data
的数据数组，您可以使用：

在下面的演示中，我将绘制100个点，并计算属性
x
的25个百分位数（第一个四分位数）：

var lowerLimit = d3.quantile(data, 0.25, function(d) {
    return d.x
});

控制台显示该值。查看演示：


var数据=d3.range（100.map）（（）=>({
x:Math.random（）*120+30，
y:Math.random（）*100
}));
var w=500，
h=160；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
x=d3.scaleLinear（）.domain（[30150]）.range（[20，w-20]）；
y=d3.scaleLinear（）.domain（[01100]）.range（[h-20,20]）；
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
var circles=svg.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，2）
.attr（“填充”、“teal”）
.attr（“cx”，d=>x（d.x））
.attr（“cy”，d=>y（d.y））；
var data=data.sort（（a，b）=>d3.升序（a.x，b.x））
var lowerLimit=d3.分位数（数据，0.25，函数（d）{
返回d.x
});
console.log（lowerLimit）；
append（'行'）
.attr（'x1'，x（下限））
.attr（'y1'，20）
.attr（'x2'，x（下限））
.attr（'y2'，h-20）
.style（'笔划'，'红色'）
svg.append（“g”）
.attr（“变换”、“平移（0）”+（h-20）+>）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“转换”、“翻译（20,0）”）
.呼叫（yAxis）
我想你的问题不清楚。你能对你正在做的事略知一二吗？或者打印你想要绘制的数据？我认为你的问题不清楚。你能对你正在做的事略知一二吗？或者打印您试图绘制的数据？