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

Question

我用 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%。有人可以帮忙吗？提前致谢!

Answer 1

嗯，你的问题不清楚。当你说:

I need to draw a vertical line after 25% of data points

您正在谈论the first quartile ，如果没有数据，就不可能进行计算，不仅如此，对于每个不同的数据集，它会发生变化。

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

给定一个名为 data 的数据数组，您可以使用 d3.quantile :

var firstQuartile = d3.quantile(data, 0.25);

在下面的演示中，我绘制了 100 个点，并计算了关于属性 x 的 25 个百分位数(第一个四分位数):

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

控制台显示该值。检查演示:

var data = d3.range(100).map(() => ({
    x: Math.random() * 120 + 30,
    y: Math.random() * 100
}));

var w = 500,
    h = 160;
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

x = d3.scaleLinear().domain([30, 150]).range([20, w - 20]);
y = d3.scaleLinear().domain([0, 100]).range([h - 20, 20]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var circles = svg.selectAll("circles")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 2)
    .attr("fill", "teal")
    .attr("cx", d => x(d.x))
    .attr("cy", d => y(d.y));

var data = data.sort((a, b) => d3.ascending(a.x, b.x))

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

console.log(lowerLimit);

svg.append('line')
    .attr('x1', x(lowerLimit))
    .attr('y1', 20)
    .attr('x2', x(lowerLimit))
    .attr('y2', h - 20)
    .style('stroke', 'red')

svg.append("g")
    .attr("transform", "translate(0," + (h - 20) + ")")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(20,0)")
    .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

但是，如果您谈论的是“获取域的 25% 的值”，答案很简单。例如，您可以创建一个函数:

function findLimit(percentage) {
    return x(x.domain()[0] + (x.domain()[1] - x.domain()[0]) * percentage / 100);
};

并将该函数的值传递给 lowerLimit:

var lowerLimit = findLimit(25);

检查这个演示，在 x 轴的 25% 处画一条线:

var data = d3.range(100).map(() => ({
    x: Math.random() * 120 + 30,
    y: Math.random() * 100
}));

var w = 500,
    h = 200;
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

x = d3.scaleLinear().domain([30, 150]).range([20, w - 20]);
y = d3.scaleLinear().domain([0, 100]).range([h - 20, 20]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var circles = svg.selectAll("circles")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 2)
    .attr("fill", "teal")
    .attr("cx", d => x(d.x))
    .attr("cy", d => y(d.y));

var data = data.sort((a, b) => d3.ascending(a.x, b.x))

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

console.log(lowerLimit);

svg.append('line')
    .attr('x1', x(lowerLimit))
    .attr('y1', 20)
    .attr('x2', x(lowerLimit))
    .attr('y2', h - 20)
    .style('stroke', 'red')

svg.append("g")
    .attr("transform", "translate(0," + (h - 20) + ")")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(20,0)")
    .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>