根据回归系数在散点图上绘制回归线 [英] Plot regression line on a scatter plot from regression coefficients
本文介绍了根据回归系数在散点图上绘制回归线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用以下方法绘制回归线:
I am trying to draw regression lines using the following:
https://observablehq.com/@harrystevens/introducing-d3-regression #linear
我遵循了该教程并添加了以下代码，
I followed the tutorial and added the following code,
dataLinear = [{x: 8, y: 3},{x: 2, y: 10},{x: 11, y: 3},{x: 6, y: 6},{x: 5, y: 8},{x: 4, y: 12},{x: 12, y: 1},{x: 9, y: 4},{x: 6, y: 9},{x: 1, y: 14}]
linearRegression = d3.regressionLinear()
.x(d => d.x)
.y(d => d.y)
.domain([-1.7, 16]);
res = linearRegression(dataLinear)
console.log(res)
现在，我将系数取回:
0: Array [ -1.7, 15.961993243243242 ]
1: Array [ 16, -3.621621621621621 ]
a: -1.1064189189189189
b: 14.08108108108108
length: 2
predict: function S()
rSquared: 0.8731378215564962
如何使用系数在散点图的顶部绘制线?
How do I plot the line on top of my scatter plot using the coefficients ?
在理解什么是行生成器之前，我使用了以下代码:
Before understanding what a line generator is I used the following code:
var a_reg_line = svg.append("svg:line")
.attr("x1", xScale(0))
.attr("y1", yScale(res.b))
.attr("x2", xScale(10))
.attr("y2", yScale( (10*res.a) + res.b ))
推荐答案
看起来像库已构建，因此您可以将其返回res传递给d3.line生成器:
Looks like the library is built so that you can pass its return res to a d3.line generator:
...
let line = d3.line()
.x((d) => x(d[0]))
.y((d) => y(d[1]));
svg.append("path")
.datum(res)
.attr("d", line)
...
这是使用d3进行绘制的完整简化示例:
Here's a complete simplistic example of plotting it with d3:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HarryStevens/d3-regression@master/dist/d3-regression.min.js"></script>
</head>
<body>
<script>
let dataLinear = [{
x: 8,
y: 3
}, {
x: 2,
y: 10
}, {
x: 11,
y: 3
}, {
x: 6,
y: 6
}, {
x: 5,
y: 8
}, {
x: 4,
y: 12
}, {
x: 12,
y: 1
}, {
x: 9,
y: 4
}, {
x: 6,
y: 9
}, {
x: 1,
y: 14
}]
let linearRegression = d3.regressionLinear()
.x(d => d.x)
.y(d => d.y)
.domain([-1.7, 16]);
let res = linearRegression(dataLinear)
let margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
let x = d3.scaleLinear().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);
let svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(dataLinear, (d) => d.x));
y.domain(d3.extent(dataLinear, (d) => d.y));
// Add the valueline path.
svg.selectAll("circle")
.data(dataLinear)
.enter()
.append("circle")
.attr("r", 5)
.style("fill", "steelblue")
.attr("cx", (d) => x(d.x))
.attr("cy", (d) => y(d.y));
let line = d3.line()
.x((d) => x(d[0]))
.y((d) => y(d[1]));
svg.append("path")
.datum(res)
.attr("d", line)
.style("stroke", "steelblue")
.style("stroke-width", "2px");
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>
四元回归:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HarryStevens/d3-regression@master/dist/d3-regression.min.js"></script>
</head>
<body>
<script>
let dataLinear = [{
x: 8,
y: 3
}, {
x: 2,
y: 10
}, {
x: 11,
y: 3
}, {
x: 6,
y: 2
}, {
x: 5,
y: 2
}, {
x: 4,
y: 12
}, {
x: 12,
y: 1
}, {
x: 9,
y: 4
}, {
x: 6,
y: 9
}, {
x: 1,
y: 14
}]
let quadRegression = d3.regressionQuad()
.x(d => d.x)
.y(d => d.y)
.domain([-1.7, 16]);
let res = quadRegression(dataLinear)
let margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
let x = d3.scaleLinear().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);
let svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(dataLinear, (d) => d.x));
y.domain(d3.extent(dataLinear, (d) => d.y));
// Add the valueline path.
svg.selectAll("circle")
.data(dataLinear)
.enter()
.append("circle")
.attr("r", 5)
.style("fill", "steelblue")
.attr("cx", (d) => x(d.x))
.attr("cy", (d) => y(d.y));
let line = d3.line()
.x((d) => x(d[0]))
.y((d) => y(d[1]));
svg.append("path")
.datum(res)
.attr("d", line)
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "2px");
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>
这篇关于根据回归系数在散点图上绘制回归线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
