使用带动画的jquery将曲线路径转换为直线路径

我正在尝试一些东西，使直线路径使用曲线路径。 在这里，我有两组路径，当我在路线上单击时，单击路径动画与直线和其他线将被隐藏

希望你能让我得到我想要创造的东西，我尝试了很多东西，但没有得到任何想法

需要你的帮助吗

谢谢是预付款

$document.readyfunction{ d3.选择所有“灌浆路径”。属性“笔划宽度”，“3”； }; d3.选择所有“灌浆”。在MouseOver上，选择函数E{ $this.find'path'。attr'stroke-width'，6'； }.onmouseout，function{ $this.find'path'。attr'stroke-width'，3'； }.onclick，function{ var totalWidth=0； $this.find'path'。每个函数索引{ var getWidth=this.getTotalLength/2； //ifindex==0{ //d3.选择'svgLayer_2'。附加'circle'。attr'cx'，'0'。attr'cy'，'10'。attr'r'，5.attr'fill'，'000'； //d3.选择'svgLayer_2'。附加'line'。attr'x1'，0'。attr'y1'，10'。attr'x2'，getWidth+totalWidth.attr'y2'，10'。attr'stroke'，333'，attr'stroke-width'，2'； //d3.选择'svgLayer_2'。附加'circle'。attr'cx'，getWidth+totalWidth.attr'cy'，'10'。attr'r'，5.attr'fill'，'000'； //}否则{ //d3.选择'svgLayer_2'。附加'line'。attr'x1'，totalWidth.attr'y1'，'10'。attr'x2'，getWidth+totalWidth.attr'y2'，'10'。attr'stroke'，'333'，.attr'stroke-width'，'2'； //d3.选择'svgLayer_2'。附加'circle'。attr'cx'，getWidth+totalWidth.attr'cy'，'10'。attr'r'，5.attr'fill'，'000'； //} totalWidth=getWidth+totalWidth； }; };

---

您通常不需要jquery或d3，但既然您要求，我将使用d3

首先从路径段中获取起点和终点，并将其推入一个数组中，该数组应该是可用于曲线的点：

 var curvePoints = [];
var cardinal = d3.svg.line().interpolate("cardinal");//d3v3!
d3.selectAll("#Route path").each(function(d,i){
    var point1;
    var point2 = this.getPointAtLength(this.getTotalLength());
    !i ? (point1 = this.getPointAtLength(0), curvePoints.push([point1.x,point1.y])) : void(0);
    curvePoints.push([point2.x,point2.y]);
});

cardinalcurvePoints将为您提供所需的d属性路径字符串

在单击处理程序上隐藏路由g，并显示一个新路径，其中cardinalcurvePoints作为其d属性

附言：

在您提供的示例中，直线仍然由许多线段组成。笔划线条连接可能会使您误以为它是一条曲线。 他们正在选择所有这些路径并进行转换。 既然你在最初的问题中问了，如何将它们转换成曲线，我就用一条曲线来做。这也更快，因为您不更新约30个节点，而是更新单个节点。 这是一个概念。它将在直线确认和曲线确认之间扭曲。曲线后面是原始路径段。

---

我没有在控制台上检查它。让我试一下。谢谢@ibowankenobi，我已经应用了你的所有代码，但没有给我正确的路径，我有多条路线，所以可能无法使用此代码。不，我有点而不是曲线点。我刚刚在你的g元素上试过，现在可以了。很酷，但仍然需要你的帮助，我想要在同一个地方有动画的直线。有可能吗？你说的动画到底是什么意思？是否要隐藏原始线段并显示曲线？还是要设置曲线的动画，从0长度开始，直到其为全长？