javascript - 用 d3.js 绘制赛道

Question

由于个人小游戏的需要，必须绘制一条赛道作为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");

Answer 1

d3 可能超出您的需要。您应该查看 svg 路径语法 https://www.w3.org/TR/SVG/paths.html

您可以在 https://codepen.io/anthonydugois/pen/mewdyZ 上试用

您必须将数据转换为与 svg 路径命令相对应的值，但这应该非常简单。

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

描述了上面的三个部分，除了我编造的弧形内容 :) 因为我没有做数学运算。

M 100 300 -- 移动而不绘制到点 100, 300L 400 300 -- 画一条线到400、300(长度300)A 11 11 0 1 1 400 418 -- 使用 11 和 11 的 x 和 y 半径，不旋转，并设置扫描标志，绘制一条弧线到点 400、418
L 300 418 -- 画一条线到300、418(长度100)