Esta pregunta probablemente pertenece a Maths StackExchange , pero de todos modos.

En primer lugar, primero debe verificar si es posible que la combinación de las longitudes de los lados forme un triángulo.

La forma de hacerlo es con el Teorema de la Desigualdad del Triángulo . Establece que cada una de las longitudes de los lados debe ser menor que la suma de los otros dos.

Entonces, en tu ejemplo, las longitudes [5,200,300] no pueden formar un triángulo porque 300 no es menor que (5 + 200).

Además, ninguna de las longitudes debe ser <= 0.

Así que trabajemos con tres longitudes de lado válidas: [150, 200, 300].

La forma de obtener los tres puntos es comenzar con un lado y dibujar eso primero. Entonces comenzaremos con el lado que es 150.

Puedes dibujar ese lado en cualquier lugar, pero hagamos que la línea vaya de (0,0) a (150,0).

Para obtener el tercer punto, necesitamos encontrar dónde se unirían los otros dos lados. Imagina dos círculos centrados en cada extremo de esa primera línea. Cada círculo tiene un radio correspondiente a las longitudes de los dos lados restantes. La forma de calcular el tercer punto es encontrar los puntos de intersección de esos dos círculos.

 svg { background-color: linen; width: 500px; } line { stroke: black; stroke-width: 2; } .c300 { fill: none; stroke: blue; stroke-width: 2; } .c200 { fill: none; stroke: green; stroke-width: 2; } line.la { stroke: blue; stroke-dasharray: 4 6; } .lb { stroke: green; stroke-dasharray: 4 6; }

 <svg viewBox="-350 -350 750 700"> <line class="l150" x1="0" y1="0" x2="150" y2="0"/> <circle class="c300" cx="0" cy="0" r="300"/> <circle class="c200" cx="150" cy="0" r="200"/> <line class="la" x1="0" y1="0" x2="241.667" y2="-177.756"/> <line class="lb" x1="150" y1="0" x2="241.667" y2="-177.756"/> </svg>

Si usamos la versión de la fórmula de Wolfram Alpha, obtenemos lo siguiente:

 d^2 - r^2 + R^2 x = ----------------- 2 * d;

y

 sqrt( 4 * d^2 * R^2 - ( d^2 - r^2 + R^2 )^2 ) y = ----------------------------------------------- 2 * d

donde d es la longitud de ese primer lado, y r y R son las longitudes de los otros dos lados.

Así que para nuestro ejemplo:

 R = 300 r = 200 d^2 - r^2 + R^2 = 150^2 - 300^2 + 200^2 = 72500 x = 72500 / 300 = 241.667 y = sqrt( 4 * 22500 * 90000 - 72500^2) / 300 = sqrt( 2843750000 ) / 300 = 53326.823 / 300 = 177.756

Y puede ver estos valores para x e y en el ejemplo SVG anterior.

Tenga en cuenta que los círculos se cruzan tanto por encima como por debajo de la primera línea. Entonces 177.756 y -177.656 son soluciones válidas para y .

Supongamos que el punto A siempre está en 0,0 y el punto B tiene la misma coordenada y . Puedes calcular la posición de C usando la ley de los cosenos :

 const calculateTriangle = (a, b, c) => { const ax = 0; const ay = 0; const bx = ax + c; const by = ay; const cosAlpha = (a * a - b * b - c * c) / (b * c * 2); const alpha = Math.acos(cosAlpha); const cx = ax - b * cosAlpha; const cy = ay + b * Math.sin(alpha); return {ax, ay, bx, by, cx, cy}; };

Aquí hay un fragmento de código de trabajo con calculateTriangle . Tenga en cuenta que los números de longitud de los lados deben ser válidos

 const calculateTriangle = (a, b, c) => { const ax = 0; const ay = 0; const bx = ax + c; const by = ay; const cosAlpha = (a * a - b * b - c * c) / (b * c * 2); const alpha = Math.acos(cosAlpha); const cx = ax - b * cosAlpha; const cy = ay + b * Math.sin(alpha); return {ax, ay, bx, by, cx, cy}; }; const onDraw = () => { const a = d3.select('#side-a').node().value; const b = d3.select('#side-b').node().value; const c = d3.select('#side-c').node().value; const {ax, ay, bx, by, cx, cy} = calculateTriangle(parseInt(a), parseInt(b), parseInt(c)); d3.select('polygon').attr('points', `${ax},${ay} ${bx},${by} ${cx},${cy}`) console.log('T: ', t); } d3.select('button').on('click', onDraw);

 #wrapper { display: flex; flex-direction: row; } #container { font-family: Ubuntu; font-size: 16px; display: flex: flex-direction: column; } #container > div { display: flex; flex-direction: row; margin: 10px 0 0 20px; } #container > div > span { width: 10px; } #container > div > input { margin-left: 20px; width: 50px; } #container button { margin-left: 30px; width: 60px; } svg { border: 1px solid grey; margin: 10px 0 0 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id='wrapper'> <div id='container'> <div> <span>A: </span><input type="number" id="side-a" value="50"/> </div> <div> <span>B: </span><input type="number" id="side-b" value="40"/> </div> <div> <span>C: </span><input type="number" id="side-c" value="30"/> </div> <div> <button>DRAW</button> </div> </div> <svg width="110" height="110"> <polygon transform="translate(10,10)" /> </svg> </div>