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 path命令对应的值，但它应该非常简单。

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

描述了你上面的三个部分，除了我编写弧形的东西:)因为我没有做数学。

M 100 300 - 在没有绘制的情况下移动到点100,300 L 400 300 - 绘制一条线到400,300（长度300） A 11 11 0 1 1 400 418 - 使用半径x和y为11和11，没有旋转，并设置扫描标志，绘制弧到点400,418
L 300 418 - 画一条线到300,418（长度100）

用d3.js绘制赛道

1 个答案: