使用D3转换后创建新的SVG元素

Question

基本上这是一个链式转换问题，但它必须在第一次转换结束后创建一个新元素（例如圆圈）。我想用推荐的链转换方式实现它（不使用＆＃34; end＆＃34; listener）

这就是我现在拥有的。我似乎无法找到网络周围的任何示例，这些示例将创建一个新元素而不使用＆＃34; end＆＃34;监听器。

     var svgContainer = d3.select("body")
                      .append("svg")
                      .attr("width",300)
                      .attr("height",300);

     var svgLine = svgContainer.append("line")
                               .attr("x1", 1)
                               .attr("y1", 1)
                               .attr("x2", 5)
                               .attr("y2", 1)
                               .attr("stroke-width", 2)
                               .attr("stroke", "black");

      var lineAnimation_1 = svgLine.transition()
                                 .duration(2000)
                                 .attr({x2:400,y2:1});