gpt4 book ai didi

How to get svg path for a bezier line chart from an array of points?(如何从一组点获得Bezier折线图的SVG路径?)

转载 作者:bug小助手 更新时间:2023-10-28 20:54:38 26 4
gpt4 key购买 nike



I have an array of points [[x1,y1],[x2,y2],[x3,y3]...] using which I want to render a curved line chart.

我有一个点数组[[x1,y1],[x2,y2],[x3,y3]...]我想用它来绘制一张曲线图。


I tried this curve fitting solution which gives an accurate curve like this-enter image description here

我尝试了这个曲线拟合解决方案,它可以得到像这样的准确曲线-


The above curve is smooth and mathematically precise but I need an altered curve fitting solution that generates a curve that passes through all the points without going above or below them. This means that the crests and troughs of the curve should coincide with points. something like this- expected chart

上面的曲线是平滑的和数学上的精确,但我需要一个改变的曲线拟合解决方案,生成一条曲线,通过所有的点,而不是通过他们的上方或下方。这意味着曲线的波峰和波谷应该与点重合。像这样的事情-


更多回答

Please take a look at this answer: stackoverflow.com/questions/64933819/…

请看这个答案:Stackoverflow.com/Questions/64933819/…

Thanks @enxaneta This link provides a function that returns curved svg path from array of points. But in some cases, the curve does not meet my requirement. See this screenshot. It has unnecessary bulge, where it should have been a straight line.

Thanks@enxaneta这个链接提供了一个函数,可以从点数组返回弯曲的SVG路径。但在某些情况下,曲线不符合我的要求。请看这个屏幕截图。它有不必要的凸起,它本应是一条直线。

Don't put additional details in comments, put them in your post. Also the curve you're showing in that new image is pretty much what things have to look like, unless you can come up with additional rules based on a sequence of neighbours, rather than just the direct neighbours. But on an SO note: SO is not for asking folks to supply you with code, it's for getting help fixing your code, so what have you tried already? (and please put what you've tried already in your post, of course).

不要在评论中添加额外的细节,而是将它们放在你的帖子中。此外,你在这张新图片中显示的曲线几乎就是事情必须看起来的样子,除非你能根据一系列邻居而不仅仅是直接邻居提出额外的规则。但需要注意的是:这不是为了让人们向您提供代码,而是为了获得修复代码的帮助,那么您已经尝试了什么?(当然,请把你已经尝试过的东西放在你的帖子里)。

Thanks @Mike'Pomax'Kamermans I have updated my question.

谢谢@Mike‘Pomax’Kamerman我已经更新了我的问题。

Thanks. The second point still stands though: that's what things have to look like if you're using a spline interpolation, because the only direction you can go from the first point is towards the second point, and the only way to not have any bulge is if, at the second point, you abruptly change direction towards the third point, which isn't a curve, that's just a polygon. You're showing the exact data example where curve fitting is universally going to look weird. In fact, spline interpolation looks downright "nice" compared to regular polygonal interpolation, which will "wave".

谢谢。第二个点仍然存在:这就是使用样条线插值法时的情况,因为从第一个点到第二个点的唯一方向是朝向第二个点,唯一不会有任何凸起的方法是在第二个点突然改变方向朝向第三个点,这不是一条曲线,这只是一个多边形。您将展示一个精确的数据示例,在该示例中,曲线拟合将普遍看起来很奇怪。事实上,与规则多边形内插相比,样条线内插看起来非常“好”,因为规则多边形内插会“波动”。

优秀答案推荐

After some research, I found a way to generate the svg path of the curve using the given array of points. This solution generates a smooth curve whose crests and troughs coincide with the points.

经过研究,我找到了一种使用给定的点数组来生成曲线的SVG路径的方法。此解决方案会生成一条平滑曲线,其波峰和波谷与这些点重合。


const svgQuadraticCurvePath = points => {
let path = 'M' + points[0][0] + ',' + points[0][1];

for (let i = 0; i < points.length - 1; i++) {
const xMid = (points[i][0] + points[i + 1][0]) / 2;
const yMid = (points[i][1] + points[i + 1][1]) / 2;
const cpX1 = (xMid + points[i][0]) / 2;
const cpX2 = (xMid + points[i + 1][0]) / 2;
path +=
'Q ' +
cpX1 +
', ' +
points[i][1] +
', ' +
xMid +
', ' +
yMid +
(' Q ' +
cpX2 +
', ' +
points[i + 1][1] +
', ' +
points[i + 1][0] +
', ' +
points[i + 1][1]);
}

return path;
};

更多回答

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com