D3.js从直线到弧线的平滑过渡？

Question

请注意，有一个类似但不同的问题here。

目标：我试图让一条直线移动然后换成弧形。

我尝试的JSFiddle是here

var svg = d3.select("svg")
var myPath = svg.append("path")
.attr("id", "myPath")
.attr("d", "M0 50, l 25 0")
.attr("stroke", "black")
.attr("fill", "none")
myPath.transition().duration(2000).attr("transform", "translate(100, 0)")
myPath.transition().delay(2000).duration(2000).attr("d", "M 125 143.30127018922192 A 50 50 0 0 0 100 50")

<script src="https://d3js.org/d3.v4.js"></script>
<div id="d3-visualization-container">
    <svg width="500" height="500" style=";border:1px lightgray solid;"/>
</div>

然而，只是链接转换不会让我完全在那里，如果我没有，我不想使用d3.arc。

思想？