Animation d3 js中动画直线和圆的剪辑路径

如何沿路径剪裁动画直线和圆

例如，我也尝试过剪裁圆和点

我添加了以下代码：

svg.append("defs")
            .append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", 960/2)
            .attr("height", 500/2);

并添加了定义圆和路径的以下部分

.attr('clip-path', 'url(#clip)')

剪裁对路径的效果很好，但对圆和线的效果不同

我在这里

如何添加剪辑路径，使其仅在路径的可见/剪辑部分显示圆和线

---

注意：需要对沿多条路径移动的多个圆和线应用剪裁。

这是因为您在圆上使用变换：圆的剪裁路径也被变换，这意味着它是相对于圆的。随着圆的移动，剪辑路径也随之移动。当圆相对于其变换居中于0,0时（变换随着圆的移动而变化，而不是居中属性），剪辑路径将其切割为四分之一圆（当它通过0,0时）

一种解决方案是使用cx和cy属性来定位圆。更快的选择是将路径、直线、圆和点附加到A

g

并剪裁g，剪裁过程中的所有子项：

var g = svg.append("g")
  .attr("clip-path", "url(#clip)")

var path = g.append("path")
    .data([points])
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));

 g.selectAll(".point")
    .data(points)
  .enter()
    .append("circle")
    .attr("r", 4)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

circle = g.append("circle")
    .attr("r", 13)
    .attr("transform", "translate(" + points[0] + ")");

line = g.append("line")
    .attr("y1", -50)
    .attr("y2", 50)
    .attr("class", "x-hover-line hover-line")
    .attr("transform", "translate(" + points[0] + ")");

更新代码：

var点=[
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，960）
.attr（“高度”，500）；
svg.append（“defs”）
.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，960/2）
.attr（“高度”，500/2）；
var g=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
var path=g.append（“路径”）
.数据（[点]）
.attr（“d”，d3.svg.line（）
.张力（0）//Catmull–Rom
.插入（“基数闭合”）；
g、 选择全部（“.point”）
.数据（点数）
.输入（）
.附加（“圆圈”）
.attr（“r”，4）
.attr（“transform”，函数（d）{return“translate”（+d+）”）；}）；
圆圈=g.附加（“圆圈”）
.attr（“r”，13）
.attr（“转换”、“平移”（+点[0]+））；
行=g.append（“行”）
.attr（“y1”，-50）
.attr（“y2”，50）
.attr（“类”、“x悬停线悬停线”）
.attr（“转换”、“平移”（+点[0]+））；
过渡（）；
函数转换（）{
圆。过渡（）
.持续时间（10000）
.attrween（“转换”，translateLong（path.node（））
.每个（“结束”，过渡）；
行。转换（）
.持续时间（10000）
.attrween（“转换”，translateLong（path.node（））
.每个（“结束”，过渡）；
}
//返回用于沿指定路径元素进行转换的属性。
函数translateLong（路径）{
var l=path.getTotalLength（）；
返回函数（d，i，a）{
返回函数（t）{
var p=path.getPointAtLength（t*l）；
返回“translate”（“+p.x+”，“+p.y+”）；
};
};
}

路径{
填充：无；
行程：#000；
笔画宽度：3px；
}
圈{
填充：钢蓝；
冲程：#fff；
笔画宽度：3px；
}
.悬停线{
/*冲程：#6F257F*/
行程：#140917；
笔划宽度：2.5px；
/*笔划数组：3,3*/
}
.悬停文本{
字体大小：22px；
字体大小：粗体；
}

---

谢谢您的清晰解释。在我的图形的左下方有轴文本。所以，我使用了不同的父g，它工作得非常好。