用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, 300 L 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）