Question

我是d3的初学者，目前无法使用最新版本，但我使用的是3.x版本。

我想要实现的应该是简单的，但遗憾的是我找不到如何做的资源：

目标是在我的svg中显示路径。然后我想显示例如一个圆圈，沿着路径过渡/移动/追踪圆圈。如果我想要遵循完整路径，这可以正常工作。

但目标是仅部分遵循路径。

如果我希望圆圈从路径的位置0开始并按照它直到例如，我该怎么办？ 25％的路径？

然后再次，如果圆圈为25％，我怎么能从那里跟随50％的路径而不从路径的0位开始？

我将非常感谢您在这里提供的任何意见。非常感谢你。

Answer 1

我使用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())()
    });

以下是演示：

＆＃13;

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

＆＃13;

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
    
circle {
  stroke: #fff;
  stroke-width: 3px;
}

＆＃13;

<script src="//d3js.org/d3.v3.min.js"></script>

＆＃13;

如何沿路径部分或仅按百分比过渡

1 个答案: