Draw a race track with d3.js

[Cedric Millauriaux]

For the needs of a small personnal game, I must draw a race track as a SVG path. For this, I thought the use D3.js library that seems to fit my needs perfectly, but I can not seem to find a way to achieve what I want to do. My circuit is in the following form, and serve my game engine to calculate the speed and behavior of cars. It is simply a sequence of straight lines and curves

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

]

I tried to use naively D3.js and I was able to draw several paths that correspond to each sector of the circuit: straight lines and arcs. Now I want to find a way to join all these elements butt, so draw my final circuit. I followed the tutorial on the next page (https://www.dashingd3js.com/svg-paths-and-d3js) and I make the following code : 

var lineFunction = d3.svg.line()

        .x(function (d) {

            return d.x;

        })

        .y(function (d) {

            return d.y;

        })

        .interpolate("linear");

var radialLineFunction = d3.svg.line.radial()

        .interpolate("basis")

        .tension(0)

        .angle(function (d) {

            return(d.angle * Math.PI) / 180;

        })

        .radius(function (d) {

            return d.radius;

        });

 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 = radialLineFunction(curveData);

                        paths.push(arcData);

                    }

                }

                return paths;

            })

            .attr("stroke", "blue")

            .attr("stroke-width", 2)

            .attr("fill", "none");

But it doesn't works. Have you any idea ?

A big thank you in advance to those who read this and who can provide me an answer

[cesar pachon]

hello Cedrik, it sounds like a nice project, but I am curious why you choose a chart-visualization library for implementing a game? I do not doubt that it can be done, but maybe it is not the library that most fit that role. by example, if you really wanna go with SVG, there is http://snapsvg.io/, if you wanna go the canvas way there is fabric.js, and of course three.js if you wanna go crazy with webgl and 3d stuff. there are also lot of javascript gameengines (photon.. ) and, if it is an academic project, you can also write your own code on top of a canvas, it is easy and you will learn a lot.

[Ken Lin]

Maybe this will help - http://bl.ocks.org/cloudshapes/5662234