用d3.js画一条跑道

对于小型个人游戏的需要，我必须绘制一条赛道作为SVG路径。为此，我认为使用D3.js库似乎完全符合我的需求，但我似乎找不到实现我想要做的事情的方法。我的电路采用以下形式，并为我的游戏引擎提供服务，以计算汽车的速度和行为。它只是一系列直线和曲线

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

]

我尝试天真地使用D3.js，并能够绘制出与电路的每个扇区相对应的几条路径：直线和圆弧。现在我想找到一种方法来连接所有这些元素，所以画出我的最后一个回路。我遵循了下一页的教程(https://www.dashingd3js.com/svg-paths-and-d3js)我可以很好地创建一条由几条线组成的路径，这些线代表我电路中的不同直线，代码如下：

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");

但是我如何在绘制直线和曲线之间切换呢？

提前非常感谢那些阅读本文并能为我提供答案的人

浣熊

我发现了这样的东西：

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);
})

这是一条好赛道吗？

我试过这个，但不起作用。。。知道吗？

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");