Disegna una pista da corsa con d3.js

Question

Per le esigenze di un piccolo gioco personale, devo tracciare una pista da corsa come percorso SVG. Per questo, ho pensato di usare la libreria D3.js che sembra adattarsi perfettamente alle mie esigenze, ma non riesco a trovare un modo per ottenere ciò che voglio fare. Il mio circuito è nella forma seguente e serve il mio motore di gioco per calcolare la velocità e il comportamento delle auto. È semplicemente una sequenza di linee rette e curve

"sectors": [ 
    { 
     "length": 300, 
     "type": "line" 
    }, 
    { 
     "length": 18, 
     "type": "curve", 
     "radius": 11, 
     "angle": 86, 
     "turn" : 'right' 
    }, 
    { 
     "length": 100, 
     "type": "line" 
    } 

]

ho provato ad utilizzare ingenuamente d3.js e ho potuto disegnare diversi percorsi che corrispondono a ciascun settore del circuito: linee rette e archi. Ora voglio trovare un modo per unire tutti questi elementi di testa, quindi disegnare il mio circuito finale. Ho seguito il tutorial nella pagina successiva (https://www.dashingd3js.com/svg-paths-and-d3js) e posso ben creare un percorso composto da diverse linee che rappresentano le diverse linee rette del mio circuito con un codice come questo:

var lineFunction = d3.svg.line() 
        .x(function(d) { return d.length; }) 
        .y(function(d) { return 0; }) 
        .interpolate("linear"); 

var lineGraph = svgContainer.append("path") 
         .attr("d", lineFunction(mySectors)) 
         .attr("stroke", "blue") 
         .attr("stroke-width", 2) 
         .attr("fill", "none"); 

Ma come posso cambiare tra disegnare linee e curve?

Un grande grazie in anticipo a chi legge questo e chi mi può dare una risposta

Raccoon

---

ho trovato qualcosa di simile:

path = svg.append("path") 
    .datum(points); 


path.attr("d", function (d) { 
    var lines = new Array(); 

    for (var i = 0; i < d.length; i++) { 
     lines.push([d[i][0], d[i][1]]); 
    } 
    return line(lines); 
}) 

Si tratta di un buona pista?

---

Ci provo, ma non funziona ... Qualche idea?

svg.append("path") 
      .datum(formatSectors) 
      .attr("d", function (d) { 
       var paths = new Array(); 
       for (var i = 0; i < d.length; i++) { 
        if (d[i].type === 'line') { 
         var lineData = [{"x": 0, "y": 0}, {"x": d[i]['distance'], "y": d[i]['distance']}] 
         paths.push(lineFunction(lineData)); 
        } 
        if (d[i].type === 'curve') { 
         var curveData = {"radius": d[i].radius, "angle": d[i].angle}; 
         var arcData = arcFunction(curveData); 
         paths.push(arcData); 
        } 
       } 
       return paths; 
      }) 
      .attr("stroke", "blue") 
      .attr("stroke-width", 2) 
      .attr("fill", "none"); 

Answer 1

d3 potrebbe essere più di quanto necessario. Si dovrebbe guardare la sintassi svg percorso https://www.w3.org/TR/SVG/paths.html

Si può provare a https://codepen.io/anthonydugois/pen/mewdyZ

si dovrà tradurre i dati in valori che corrispondono a SVG comandi percorso, ma dovrebbe essere piuttosto semplice.

M 100 300 L 400 300 A 11 11 0 1 1 400 418 L 300 418 

descrive i tre segmenti che hai sopra, tranne che ho inventato la roba dell'arco :) perché non ho fatto i calcoli.

M 100 300 - mossa senza disegno al punto 100, 300 L 400 300 - tracciare una linea 400, 300 (lunghezza 300) A 11 11 0 1 1 400 418 - utilizzando raggio x e y di 11 e 11, senza rotazione e flag di sweep impostati, tracciare un arco al punto 400, 418
L 300 418 - tracciare una linea a 300, 418 (lunghezza 100)