在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值设置为lowerLimit中所有x值的25％。 有人可以帮忙吗？ 提前致谢！

Answer 1

好吧，你的问题还不清楚。 当你说：

我需要在25％的数据点后绘制一条垂直线

您正在谈论的是第一个四分位数 ， 如果没有数据就无法计算，不仅如此，而且每一个不同的数据集都会改变 。

如果您确实在谈论第一个四分位数，则必须执行以下操作：

给定一个名为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(dx)) .attr("cy", d => y(dy)); var data = data.sort((a, b) => d3.ascending(ax, bx)) var lowerLimit = d3.quantile(data, 0.25, function(d) { return dx }); 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(dx)) .attr("cy", d => y(dy)); var data = data.sort((a, b) => d3.ascending(ax, bx)) var lowerLimit = d3.quantile(data, 0.25, function(d) { return dx }); 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>