5
작은 개인적인 게임의 필요성 때문에 경마장을 SVG 경로로 그려야합니다. 이를 위해 D3.js 라이브러리를 사용하여 내 요구 사항에 완벽하게 맞는 것으로 생각했지만 원하는 작업을 수행 할 수있는 방법을 찾을 수없는 것 같습니다. 내 회로는 다음과 같은 형태로되어 있으며 게임 엔진을 통해 자동차의 속도와 동작을 계산합니다. 단순히 난 소박 D3.js 사용하려고하는 직선과 곡선d3.js로 경마장을 그립니다
"sectors": [
{
"length": 300,
"type": "line"
},
{
"length": 18,
"type": "curve",
"radius": 11,
"angle": 86,
"turn" : 'right'
},
{
"length": 100,
"type": "line"
}
]
의 시퀀스이며, I는 회로의 각 섹터에 대응하는 여러 가지 경로를 그릴 수 있었다 : 직선 및 아크. 이제 저는이 모든 요소들을 합치는 방법을 찾고 싶습니다. 그래서 최종 회로를 그려보십시오. 나는 다음 페이지 (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");