我正在尝试使用曲线路径制作直线路径。 这里我有两组路径，当我点击路线时，点击路径动画，直线和其他线将被隐藏。
希望你能得到我想要创造的东西我已经尝试了很多东西但没有得到任何想法
需要你的帮助
谢谢你的到来。
$(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>
答案 0 :(得分：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)会给你＆＃34; d＆＃34;你想要的属性路径字符串。
在您的点击处理程序中隐藏#Route g，并显示一个带有基数（curvePoints）作为其d属性的新路径。
PS：