我是 d3 的初学者,目前无法使用最新版本,但我使用的是 3.x 版本。
我想实现的应该很简单,但遗憾的是我没有找到有关如何实现它的资源:
目标是在我的 svg 中显示路径。然后我想显示例如一个圆圈并沿路径过渡/移动/跟踪圆圈。如果我想要遵循完整路径,这很好用。
但目标是仅部分遵循路径。
如果我想让圆圈从路径的位置 0 开始并沿着它直到例如,我该怎么办? 25% 的路径?
再一次,如果圆圈位于 25%,我如何才能从那里走到 50% 的路径而不从路径的位置 0 重新开始?
如果您能在这里提供任何意见,我将不胜感激。非常感谢。
最佳答案
我使用 Mike Bostock 的这段代码(根据需要使用 D3 v3.x)构建了我的答案:https://bl.ocks.org/mbostock/1705868
首先,我创建了一个数据数组,指定了每个圆应该沿路径行进的多少:
var data = [0.9, 1, 0.8, 0.75, 1.2];
此处的值以百分比表示。所以,我们有 5 个圆圈:第一个(下面演示中的蓝色)将在路径的 90% 处停止,第二个(橙色)在 100%,第三个(绿色)在 80%,第四个(红色)在 75%,而第五个(演示中为紫色)将移动 120% 的路径,也就是说,它将移动整个路径长度并增加 20%。
然后,我更改了 Bostock 的函数 translateAlong
以获取每个圆的 datum
:
function translateAlong(d, path) {
var l = path.getTotalLength() * d;
return function(d, i, a) {
return function(t) {
var p = (t * l) < path.getTotalLength() ?
path.getPointAtLength(t * l) : path.getPointAtLength(t * l - path.getTotalLength());
return "translate(" + p.x + "," + p.y + ")";
};
};
}
这里的重点是:
var l = path.getTotalLength() * d;
这将决定每个圆圈的最终位置。三元运算符很重要,因为我们的最后一个圆圈会超过 100% 的路径。
最后,我们必须调用转换,传递数据和路径本身:
circle.transition()
.duration(10000)
.attrTween("transform", function(d) {
return translateAlong(d, path.node())()
});
这是演示:
var points = [
[240, 100],
[290, 200],
[340, 50],
[390, 150],
[90, 150],
[140, 50],
[190, 200]
];
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
var color = d3.scale.category10();
var data = [0.9, 1, 0.8, 0.75, 1.2];
svg.selectAll(".point")
.data(points)
.enter().append("circle")
.attr("r", 4)
.attr("transform", function(d) {
return "translate(" + d + ")";
});
var circle = svg.selectAll("foo")
.data(data)
.enter()
.append("circle")
.attr("r", 13)
.attr("fill", function(d, i) {
return color(i)
})
.attr("transform", "translate(" + points[0] + ")");
circle.transition()
.duration(10000)
.attrTween("transform", function(d) {
return translateAlong(d, path.node())()
});
// Returns an attrTween for translating along the specified path element.
function translateAlong(d, path) {
var l = path.getTotalLength() * d;
return function(d, i, a) {
return function(t) {
var p = (t * l) < path.getTotalLength() ?
path.getPointAtLength(t * l) : path.getPointAtLength(t * l - path.getTotalLength());
return "translate(" + p.x + "," + p.y + ")";
};
};
}
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
stroke: #fff;
stroke-width: 3px;
}
<script src="//d3js.org/d3.v3.min.js"></script>
关于javascript - 如何部分或仅按百分比沿路径过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43676992/