散点图中画三根线

[sherlockmisterZ]

Dear 大神们

我有一个需求需要实现

如图所示
坐标系中绘制了31个点
需要连接首末两点
根据首末两点作出的直线，找到这直线两侧最远的离散点，做出平行线，这个平行线贯穿最远的离散点
在这三根直线与Y轴坐标相交的地方标记处当前Y坐标的值，高亮显示

请帮忙实现，提供帮助。

以上，谢谢！

[sherlockmisterZ]

import { Scatter } from '@ant-design/plots'
import React from 'react'

const data = [
{ x: 1, y: 0 },
{ x: 2, y: 1 },
{ x: 3, y: 1 },
{ x: 4, y: 1 },
{ x: 5, y: 2 },
{ x: 6, y: 3 },
{ x: 7, y: 2 },
{ x: 8, y: -1 },
{ x: 9, y: 0 },
{ x: 10, y: 1 },
{ x: 11, y: 2 },
{ x: 12, y: 2 },
{ x: 13, y: 2 },
{ x: 14, y: 3 },
{ x: 15, y: 2 },
{ x: 16, y: 0 },
{ x: 17, y: -1 },
{ x: 18, y: 2 },
{ x: 19, y: 4 },
{ x: 20, y: 3 },
{ x: 21, y: 0 },
{ x: 22, y: -1 },
{ x: 23, y: 2 },
{ x: 24, y: 2 },
{ x: 25, y: 1 },
{ x: 26, y: -2 },
{ x: 27, y: 1 },
{ x: 28, y: 3 },
{ x: 29, y: 1 },
{ x: 30, y: 2 },
]

const DemoScatter = () => {
const config = {
data,
xField: 'x',
yField: 'y',
sizeField: 5,
style: {
stroke: '#777777',
lineWidth: 1,
fill: '#5B8FF9',
},
line: {
data: [
{ x: 1, y: 2 },
{ x: 30, y: 5 },
{ x: 1, y: 0 },
{ x: 30, y: 2 },
{ x: 1, y: -1 },
{ x: 30, y: 1 },
],
xField: 'x',
yField: 'y',
style: { stroke: '#c7cbc7', lineWidth: 2 },
tooltip: false,
},
}
return <Scatter {...config} />
}

function App() {
return (
<>

</>
)
}

export default App

[hustcc]

参考这个 demo：https://g2.antv.antgroup.com/examples/general/link/#link-annotation