使用 d3.js 绘制赛道

Posted 2023-02-22

【中文标题】使用 d3.js 绘制赛道

【英文标题】：Draw a race track with d3.js

【发布时间】：2015-01-01 10:11:19

【问题描述】：

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

【参考方案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 -- 使用半径 x 和 y 的 11 和 11，不旋转，并设置扫描标志，绘制圆弧到点 400、418 l 300 418 -- 画一条线到300、418（长度100）