小编Rac*_*oon的帖子

对于小型个人游戏的需求,我必须绘制一个赛道作为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 …