D3 V4：如何在力布局中应用从链接到边缘捆绑链接的平滑过渡？

Question

我正在尝试从力链接中的正常链接平滑过渡到边缘捆绑链接。我正在使用this example进行链接的边缘捆绑。

首先，在刻度功能中，一旦布局确定下来，我就创建普通链接，然后删除那些链接以创建边缘捆绑链接。过渡是突然的，我正在尝试使用straightlink.transition(10000).attr("stroke-opacity", 0).remove();进行平稳过渡，但似乎不起作用。

这是我的刻度功能---

function ticked() {
        if(simulation.alpha()/300 < simulation.alphaMin()){
            straightlink.transition(10000).attr("stroke-opacity", 0).remove();

            var fbundling = d3.ForceEdgeBundling()
                .step_size(0.05)
                .compatibility_threshold(0.9)
                .nodes(simulation.nodes())
                .edges(simulation.force('link').links().map(function(edge) { 
                    return {
                        source: simulation.nodes().indexOf(edge.source),
                        target: simulation.nodes().indexOf(edge.target)
                    }
                 }));

            let links = link.selectAll('.link path')
                 .data(fbundling())
            links.exit().remove();
            links.merge(links.enter().append('path'))
                 .attr('d', d3line);

        }
        else{
            let links1 = straightlink.selectAll('line')
                 .data(links)
            links1.exit().remove();
            links1.merge(links1.enter().append('line'))
                .attr("x1", function(d) {return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; })
                .style("stroke","black")
                .style("opacity",0.1);

        }