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

Question

我正在尝试使用曲线路径制作直线路径。 在这里，当我单击路线时，我有 2 组路径，当时单击直线的路径动画，其他线将被隐藏。

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

需要你的帮助

先谢谢了。

$(document).ready(function(){
			d3.selectAll('g#Route path').attr('stroke-width', '3');
		});
		
		d3.selectAll('g#Route').on("mouseover", function(e) {
			$(this).find('path').attr('stroke-width', '6');
		}).on("mouseout", function(e) {
			$(this).find('path').attr('stroke-width', '3');
		}).on("click", function(e){
			var totalWidth = 0;
			$(this).find('path').each(function(index){
				var getWidth = this.getTotalLength() / 2 ;
				
				//if(index == 0){
				//	d3.select('svg#Layer_2').append('circle').attr('cx', '0').attr('cy', '10').attr('r', 5).attr('fill', '#000');
				//	d3.select('svg#Layer_2').append('line').attr('x1', '0').attr('y1', '10').attr('x2', getWidth + totalWidth).attr('y2', '10').attr('stroke', '#333').attr('stroke-width', '2');
				//	d3.select('svg#Layer_2').append('circle').attr('cx', getWidth + totalWidth).attr('cy', '10').attr('r', 5).attr('fill', '#000');
				//}else{
				//	d3.select('svg#Layer_2').append('line').attr('x1', totalWidth).attr('y1', '10').attr('x2', getWidth + totalWidth).attr('y2', '10').attr('stroke', '#333').attr('stroke-width', '2');
				//	d3.select('svg#Layer_2').append('circle').attr('cx', getWidth + totalWidth).attr('cy', '10').attr('r', 5).attr('fill', '#000');
				//}
				totalWidth = getWidth + totalWidth;
			});
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="1920px" height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
<g id="Route">
	<path id="P1" fill="none" stroke="#2B2A29" d="M313.44-124.783L443.635,5.412"/>
	
	<path id="P2" fill="none" stroke="#2B2A29" d="M443.635,5.412L550.41,112.187"/>
	<path id="P3" fill="none" stroke="#2B2A29" d="M550.412,112.188l23.482,23.481"/>
	<path id="P4" fill="none" stroke="#2B2A29" d="M573.892,135.67l38.689,38.688"/>
	<path id="P5" fill="none" stroke="#2B2A29" d="M612.584,174.36h34.893"/>
	<path id="P6" fill="none" stroke="#2B2A29" d="M647.473,174.36h25.833"/>
	<path id="P7" fill="none" stroke="#2B2A29" d="M673.306,174.36h24.928"/>
	<path id="P8" fill="none" stroke="#2B2A29" d="M698.233,174.36h26.257"/>
	<path id="P9" fill="none" stroke="#2B2A29" d="M724.49,174.36h31.206"/>
	<path id="P10" fill="none" stroke="#2B2A29" d="M755.697,174.36h42.438"/>
	<path id="P11" fill="none" stroke="#2B2A29" d="M798.135,174.36v42.979"/>
	<path id="P12" fill="none" stroke="#2B2A29" d="M798.135,217.336v30.479"/>
	<path id="P13" fill="none" stroke="#2B2A29" d="M798.135,247.819v63.196"/>
	<path id="P14" fill="none" stroke="#2B2A29" d="M798.135,311.015v90.118"/>
	<path id="P15" fill="none" stroke="#2B2A29" d="M798.135,401.133v97.602"/>
	<path id="P16" fill="none" stroke="#2B2A29" d="M798.135,498.734v49.254"/>
	<path id="P17" fill="none" stroke="#2B2A29" d="M798.135,547.988l-52.483,52.483"/>
	<path id="P18" fill="none" stroke="#2B2A29" d="M745.646,600.472l-52.483,52.479"/>
	<path id="P19" fill="none" stroke="#2B2A29" d="M693.162,652.949H652.24"/>
	<path id="P20" fill="none" stroke="#2B2A29" d="M652.24,652.949h-50.372"/>
	<path id="P21" fill="none" stroke="#2B2A29" d="M601.867,652.949h-36.341"/>
	<path id="P22" fill="none" stroke="#2B2A29" d="M565.527,652.949h-35.425"/>
	<path id="P23" fill="none" stroke="#2B2A29" d="M533.997,652.949h-40.188"/>
	<path id="P24" fill="none" stroke="#2B2A29" d="M493.805,652.949h-68.578"/>
	<path id="P25" fill="none" stroke="#2B2A29" d="M425.227,652.949v-40.56"/>
	<path id="P26" fill="none" stroke="#2B2A29" d="M425.227,612.392v-50.037"/>
	<path id="P27" fill="none" stroke="#2B2A29" d="M425.227,562.354v-81.003"/>
	<path id="P28" fill="none" stroke="#2B2A29" d="M425.227,481.35h-19.677"/>
	<path id="P29" fill="none" stroke="#2B2A29" d="M405.552,481.35h-26.26"/>
	<path id="P30" fill="none" stroke="#2B2A29" d="M379.293,481.35h-32.354"/>
</g>
<g id="Route">
	<path id="P1_1_" fill="none" stroke="#E21B6C" d="M755.697,60.169v32.615"/>
	<path id="P2_1_" fill="none" stroke="#E21B6C" d="M755.697,92.784v26.682"/>
	<path id="P3_1_" fill="none" stroke="#E21B6C" d="M755.697,119.466v54.895"/>
	<path id="P4_1_" fill="none" stroke="#E21B6C" d="M755.697,174.36v35.871"/>
	<path id="P5_1_" fill="none" stroke="#E21B6C" d="M755.697,210.231v40.771"/>
	<path id="P6_1_" fill="none" stroke="#E21B6C" d="M755.697,251.001v43.005"/>
	<path id="P7_1_" fill="none" stroke="#E21B6C" d="M755.697,294.004v19.929"/>
	<path id="P8_1_" fill="none" stroke="#E21B6C" d="M755.697,313.936v39.021"/>
	<path id="P9_1_" fill="none" stroke="#E21B6C" d="M755.697,352.953v30.873"/>
	<path id="P10_1_" fill="none" stroke="#E21B6C" d="M755.697,383.825v38.911"/>
	<path id="P11_1_" fill="none" stroke="#E21B6C" d="M755.697,422.74l0.002,30.627"/>
	<path id="P12_1_" fill="none" stroke="#E21B6C" d="M755.698,453.365v25.745"/>
	<path id="P13_1_" fill="none" stroke="#E21B6C" d="M755.698,479.114l-29.396,29.396"/>
	<path id="P14_1_" fill="none" stroke="#E21B6C" d="M726.303,508.511l-22.48,22.477"/>
	<path id="P15_1_" fill="none" stroke="#E21B6C" d="M703.822,530.988l-37.764,37.77"/>
	<path id="P16_1_" fill="none" stroke="#E21B6C" d="M666.06,568.75l-20.278,20.276"/>
	<path id="P17_1_" fill="none" stroke="#E21B6C" d="M645.781,589.031l-21.888,21.894"/>
	<path id="P18_1_" fill="none" stroke="#E21B6C" d="M623.893,610.922l-18.252,18.248"/>
	<path id="P19_1_" fill="none" stroke="#E21B6C" d="M605.641,629.17l-19.089,19.093"/>
	<path id="P20_1_" fill="none" stroke="#E21B6C" d="M586.552,648.263l-14.313,14.313"/>
</g>
</svg>

Answer 1

你通常不需要 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]);
});

cardinal(curvePoints) 会给你你想要的“d”属性路径字符串。

在您的点击处理程序中隐藏#Route g，并显示一个新路径，其 d 属性为 cardinal(curvePoints)。

PS：

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