Draw a racing track with d3.js

Question

For the needs of a small personal game, I have to draw a racing track as an SVG path. For this, I thought that using the D3.js library seems to be perfect for my needs, but I can’t find a way to achieve what I want. My diagram is in the following form and serves for my game engine to calculate the speed and behavior of cars. It's just a sequence of lines and curves

"sectors": [ { "length": 300, "type": "line" }, { "length": 18, "type": "curve", "radius": 11, "angle": 86, "turn" : 'right' }, { "length": 100, "type": "line" } 

]

I tried to use naively D3.js, and I managed to draw several paths corresponding to each sector of the scheme: straight lines and arcs. Now I want to find a way to combine all of these elements, so draw my last diagram. I followed the tutorial on the next page ( https://www.dashingd3js.com/svg-paths-and-d3js ), and I can create a path consisting of several lines that represent different lines of my circuit with this code:

 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"); 

But how can I switch between drawing lines and curves?

Many thanks in advance to those who read this and who can give me an answer.

raccoon

---

I found something like this:

 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); }) 

Is this a good track?

---

I try this, but I do not work ... Any idea?

 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 may be more than you need. You should look at the svg path syntax https://www.w3.org/TR/SVG/paths.html

You can try it at https://codepen.io/anthonydugois/pen/mewdyZ

you will need to translate your data into values ​​corresponding to the svg path commands, but this should be pretty simple.

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

describes the three segments that you have above, except that I composed the arc material :) because I did not do the math.

M 100 300 - move without drawing to point 100, 300 L 400 300 - draw a line up to 400, 300 (length 300) A 11 11 0 1 1 400 418 - using the radius x and y 11 and 11 without rotation and flags set, draw an arc to point 400, 418
L 300 418 - draw a line to 300, 418 (length 100)