Javascript 如何使SVG组跟随圆形中的渐变

我正在尝试制作一个被排干的圆圈的动画，它工作得很好。然而，我需要一个“标记器”来跟踪排水水平，我很难理解如何做到这一点

我已经在这篇文章中做了一个例子，圆圈填充动画，数字动画

最终状态可在此处看到：

问题是,；我想根据排放百分比放置“XXX已使用”标记。但我几乎没有运气弄明白如何实现这一点

所以它必须上下移动，也要左右移动，这取决于百分比

我的代码如下：

const usedAmount=200；
const totalAmount=400；
常数半径=120；
const valuePercent=（usedAmount/totalAmount）*100；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
g=svg.append（“g”）.attr（“transform”、“translate”（“+width/2+”，“+height/2+”））；
设grad=svg
.append（“defs”）
.append（“linearGradient”）
.attr（“id”、“grad”）
.attr（“x1”，“0%”）
.attr（“x2”，“0%”）
.attr（“y1”，“0%”）
.attr（“y2”，“0%”）；
grad.append（“stop”）.attr（“offset”，“1%”）style（“stop color”，“#000”）；
渐变附加（“停止”）.attr（“偏移量”、“1%”）样式（“停止颜色”、“ccc”）；
设arc=d3.arc（）
.内半径（半径-40）
.外部（半径）
.endAngle（2*Math.PI）
.startAngle（0*Math.PI）；
let cutout=svg.select（'defs'）
.append（'clipPath'））
.attr（'clip-rule'，'evenodd'）
.attr（'id'，'cutout'）
.append（“路径”）
.attr（'transform'，'translate（'+radius+'，'+radius+'））
.attr（'d'，弧）
.attr（'clip-rule'，'evenodd'）
.attr（'fill'，'#ccc'）；
svg.append（“圆”）
.attr（“cx”，半径）
.attr（“cy”，半径）
.attr（“r”，半径）
.attr（“剪辑路径”、“url（#剪切）”）//应用掩码
.attr（“填充”、“url（#梯度）”）；
毕业生
.transition（）
.持续时间（3000）
.ease（d3.easeQuad）
.延迟（300）
.attr（“y1”，valuePercent+1+“%”）；
var marker=svg.append（'g'）
.attr（'class'，'gauge\uuuu fillup\uuuuu follow'）
.attr（“转换”、“转换”（+200+）、“+50+”）；
marker.append（“rect”）
.attr（“x”，10）
.attr（“y”，6）
.attr（“填充”、“千”）
.attr（“宽度”，35）
.attr（“高度”，3）；
marker.append（'svg:text'）
.attr（'类'，'标签'）
.attr（'z-index'，'4'）
.attr（'x'，50）
.attr（'y'，0）
.attr（'dy'，12）
.attr（'text-anchor'，'left'）
.datum（{textContent:'}）
.正文（200）
.transition（）
.持续时间（3000）
.延迟（300）
.ease（d3.easeQuad）
.tween（“文本”，功能（d）{
常数i=d3.插值（0，this.textContent，d）；
返回（t）=>{
d3.选择（this.text）（数学四舍五入（i（t））；
};
});
marker.append（'svg:text'）
.attr（'类'，'标签'）
.attr（'颜色'，'白色'）
.attr（'z-index'，'4'）
.attr（'x'，50）
.attr（'y'，16）
.attr（'dy'，12）
.attr（'text-anchor'，'left'）
.text（“已使用”）
您只需将组向下转换相同的数量：

marker.transition()
    .duration(3000)
    .ease(d3.easeQuad)
    .delay(300)
    .attr("transform", "translate(" + 220 + "," 
        + ((usedAmount / totalAmount) * (radius * 2)) + ")");

以下是演示：


const usedAmount=200；
const totalAmount=400；
常数半径=120；
const valuePercent=（usedAmount/totalAmount）*100；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
g=svg.append（“g”）.attr（“transform”、“translate”（“+width/2+”，“+height/2+”））；
设grad=svg
.append（“defs”）
.append（“linearGradient”）
.attr（“id”、“grad”）
.attr（“x1”，“0%”）
.attr（“x2”，“0%”）
.attr（“y1”，“0%”）
.attr（“y2”，“0%”）；
grad.append（“stop”）.attr（“offset”，“1%”）style（“stop color”，“#000”）；
渐变附加（“停止”）.attr（“偏移量”、“1%”）样式（“停止颜色”、“ccc”）；
设arc=d3.arc（）
.内半径（半径-40）
.外部（半径）
.endAngle（2*Math.PI）
.startAngle（0*Math.PI）；
let cutout=svg.select（'defs'）
.append（'clipPath'））
.attr（'clip-rule'，'evenodd'）
.attr（'id'，'cutout'）
.append（“路径”）
.attr（'transform'，'translate（'+radius+'，'+radius+'））
.attr（'d'，弧）
.attr（'clip-rule'，'evenodd'）
.attr（'fill'，'#ccc'）；
svg.append（“圆”）
.attr（“cx”，半径）
.attr（“cy”，半径）
.attr（“r”，半径）
.attr（“剪辑路径”、“url（#剪切）”）//应用掩码
.attr（“填充”、“url（#梯度）”）；
毕业生
.transition（）
.持续时间（3000）
.ease（d3.easeQuad）
.延迟（300）
.attr（“y1”，valuePercent+1+“%”）；
var marker=svg.append（'g'）
.attr（'class'，'gauge\uuuu fillup\uuuuu follow'）
.attr（“转换”、“转换”（+220+）、“+0+”）；
marker.append（“rect”）
.attr（“x”，10）
.attr（“y”，1）
.attr（“填充”、“千”）
.attr（“宽度”，35）
.attr（“高度”，3）；
marker.append（'svg:text'）
.attr（'类'，'标签'）
.attr（'z-index'，'4'）
.attr（'x'，50）
.attr（'y'，-6）
.attr（'dy'，12）
.attr（'text-anchor'，'left'）
.基准({
文本内容：“”
})
.正文（200）
.transition（）
.持续时间（3000）
.延迟（300）
.ease（d3.easeQuad）
.tween（“文本”，功能（d）{
常数i=d3.插值（0，this.textContent，d）；
返回（t）=>{
d3.选择（this.text）（数学四舍五入（i（t））；
};
});
marker.append（'svg:text'）
.attr（'类'，'标签'）
.attr（'颜色'，'白色'）
.attr（'z-index'，'4'）
.attr（'x'，50）
.attr（'y'，10）
.attr（'dy'，12）
.attr（'text-anchor'，'left'）
.text（“已使用”）；
marker.transition（）
.持续时间（3000）
.ease（d3.easeQuad）
.延迟（300）
.attr（“转换”、“转换”（+220+），“+（（usedAmount/totalAmount）*（radius*2））+”）
你的问题让我意识到我对三角学的理解不如我想象的那么好，所以我试了一下。一旦我学会了π和正弦的基本原理，答案就变得非常清楚了

我读了一篇很棒的文章，这篇文章让我找到了答案：


这解决了从上到下的方法，但是左右移动它如何，使它与圆圈相匹配？对不起，我完全错过了“左和右”部分。我在教育部做了另一个功能
marker.transition()
  .duration(3000)
  .ease(d3.easeQuad)
  .delay(300)
  .attrTween("transform", function() {
    return function(t) {
        let distance = Math.PI * t * (usedAmount / totalAmount)
        let x = radius + (radius * Math.sin(distance))
        let y = radius * (1-Math.cos(distance))
      return `translate(${x} ,${y})`
    }
  });