SVG — построение плавного пути ⇐ Javascript

[Anonymous]

Я пытаюсь построить математические функции, используя SVG в качестве графопостроителя, создавая путь, представляющий функцию. Некоторые функции, такие как x^2, работают нормально, но более сложные функции, такие как 1 / x, обычно имеют проблемы с созданием плавного пути. Моя цель — продолжать использовать SVG в качестве основного средства построения графиков (т. е. не ), генерируя плавные пути любой элементарной функции без асимптоты.
Для справки: большая часть логики пути основана на [ответе Энксанеты] (https://stackoverflow.com/a/62857298/10082415.

Код: Выделить всё

let smooth = 0.1;
let container = document.getElementById("svg");
let width = container.getAttribute("width");
let height = container.getAttribute("height");
// let xmin = 0;
// let xmax = 2 * Math.PI;
let xmin = 0;
let xmax = 10;
let ymin = -1;
let ymax = 1;

function f(x) {
return 1 / x; //works for any elementary function without asymptote
}

let points = generatePoints(-10, 10, 100);
let thePath = document.getElementById("thePath");

thePath.setAttribute("d", drawCurve(points));
thePath.setAttribute("stroke-width", 2);
thePath.setAttribute("opacity", 1);
// thePath.setAttribute("stroke-linejoin", "miter-clip");
thePath.setAttribute("stroke-linecap", "circle");
thePath.setAttribute("stroke-linejoin", "round");
// thePath.setAttribute("stroke-dasharray", "35,10");
thePath.setAttribute("shape-rendering", "geometricPrecision"); //geometricPrecision, crispEdges

points.forEach((point) => {
//plotSinglePoint(point.x, point.y);//uncomment to see indiviual points
});

/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////

function generatePoints(xMin, xMax, samples = 50) {
result = [];
let xInc = (xMax - xMin) / samples;
for (let x = xMin; x < xMax; x += xInc) {
let xVal = coordX(x);
let yVal = coordY(f(x));
let point = { x: xVal, y: yVal };
if (isValidPoint(point)) {
result.push(point);
if (x % 2 == 0) {
result.push(point);
}
}
}
return result;
}

function isValidPoint(point) {
return 0 

Подробнее здесь: [url]https://stackoverflow.com/questions/79331452/svg-plotting-a-smooth-path[/url]