Question

let pathFeatures = getFlightPath(
    shipment.from.lnglat,
    shipment.to.lnglat
).features;

let flightPath = mapSelection
    .selectAll(`.flight-path${i}`)
    .data(pathFeatures)
    .enter()
    .append("path")
    .attr("class", `flight-path flight-path${i}`)
    .attr("d", path as any);

使用上面的svg路径，我将如何构建第二条路径以放置在顶部，该路径仅渲染(0.4 * totalLength)或40％的一部分，并在一段时间后过渡到100％。

基本上，基础路径将具有stroke-dasharray（点线路径）的样式，该样式将指示尚未经过的路径，在这里，我需要一个覆盖的路径，该路径将是实线，指示已通过的路径。然后，我将要在一段时间后将该实体路径转换为其长度的100％。

我将如何处理？

Answer 1

前一天花3个小时未能解决问题，然后得到一些体面的休息，就可以在下一个工作日的前半小时内解决它。

休息一下，有时候问题可以用清醒的头脑轻松解决。

let totalLength = flightPath.node().getTotalLength();
let lengthTraveled = flightPath.node().getTotalLength() * shipment.progress;
let lengthToBeTraveled = flightPath.node().getTotalLength() - lengthTraveled;

mapSelection
                .selectAll(`flight-traveled${i}`)
                .data(pathFeatures)
                .enter()
                .append("path")
                .attr("class", `flight-traveled flight-traveled${i}`)
                .attr(
                    "stroke-dasharray",
                    `${lengthTraveled} ${lengthToBeTraveled}`
                )
                .transition()
                .duration(msRemaining)
                .ease(easeLinear)
                .attr("stroke-dasharray", `${totalLength} 0`)
                .attr("d", path as any);

我将如何在现有路径之上绘制路径的一部分

1 个答案: