Javascript D3将对象设置为路径上的特定点的动画

经过几个小时的独自尝试，我已经放弃了。我是来寻求帮助的

我正在尝试沿路径设置对象的动画，该路径指向基础路径的特定部分。我想使用D3，这样我也可以简化动画

为了演示动画本身，我添加了一个底层路径单击GO按钮查看此动画我希望对象像叠加路径一样设置动画，因此它是此路径末端的尖端

我需要的是能够调用一个函数，比如moveTofrom，to{}，为路径的那一段设置动画。我不希望它只是移动到一个点，但例如，如果它在一个角曲线之前，它也应该跟随该曲线，就像整个动画过渡一样，它没有。如果可能，不要突然停止，而是在停止时放松

/*D3.JS代码*/ //TODO:移动到路径上的特定零件 //TODO:在路径上居中OBJ 可变宽度=436， 高度=245； var svg=d3.selectsvg； var path=d3.selectbase； var circle=svg.appendrect .宽度，20 .身高20 .attrfill，FFF .attransform，translate-10，-10； 功能转换{ 圆形过渡 .期限2000 .attrTweentransform，translateLongPath.node； } //等待路径绘制完成 setTimeoutfunction{ 过渡 }, 2000; //返回用于沿指定路径元素进行转换的属性。 var to=20； var-from=0； 函数translateAlongpath{ var t0=来自； var t=来自； var l=path.getTotalLength； 返回函数d、i、a{ 返回函数{ var p0=path.getPointAtLengtht0*l；//上一个点 var p=path.getPointAtLengtht*l；///当前点 var angle=Math.atan2p.y-p0.y，p.x-p0.x*180/Math.PI；//切线的角度 t0=t； //转化 //错误：p.x-10+，+p.y-10不能正常工作 返回平移+p.x+，+p.y+旋转+角度+； }; }; } // ----------------- /*控制底层路径的JQUERY代码*/ $path=$'base'.attr'd'； $'.progressPath、.progressPathBlur.attr'd'，$path； var basePath=document.querySelector'.basePath'； var path length=basePath.getTotalLength； var-sylCount=0； var rowCount=0；//第1行 $'path'.css'stroke-dasharray'，pathLength.css'stroke-dashoffset'，pathLength； //模拟页面加载 setTimeoutfunction{ //完成设置，从车身上卸下负载 $'path'.removeClass'loading'.addClass'on'； $'.basePath'.css'stroke-dashoffset'，0； }, 1000; //基于音节的进度条路径 函数animateProgressrow，val{ 如果行===2&&val==7{ 返回false； } $stop=路径长度； max=路径长度； 转角=路径长度/100*6.25； //TODO:测试后将数学压缩为单行 如果行===0{ //第1行 最大值=5； rowAdd=corner；//添加第一个角点 如果val==max{ rowAdd=corner*2；//再前进一点，表示可以在上面写入行 } } 如果行===1{ //第2排 最大值=7； rowAdd=371.77+角点*2；//+不属于下一行的角点 如果val==max{ 行加=371.77+角*3； } } 如果行===2{ //第3排 最大值=5； rowAdd=371.77*2+角点*3；//+不属于下一行的角点 如果val==max{ rowAdd=371.77*2+角点*4； } } //设置线应设置动画以停止的位置

---

如果val不想绕过在问题中发布代码的限制，为什么不在问题本身中发布您的代码呢？这对回答问题的人来说要容易得多。我无法想象这对原型设计有什么好处。我必须包含一堆代码来说明这是为了什么。我不想在帖子中充斥着这些。在JSFIDLE上就是这样这不妨碍任何人。很好，我只包括了讨论中的片段。我已经把它转换成更有用的东西。啊，更好的是，你必须原谅我以前没有这样做。