Javascript 在React中将D3快速排序示例转换为D3版本6

我正在尝试将先前版本中的D3快速排序示例实现转换为版本6（目前是最新版本）

我已经能够使动画解析为结束状态，但交换动画与网页上的动画显示不同

这就是我到目前为止所做的（可能没有任何用处），我目前希望了解如何将D3快速排序示例转换为最新版本

代码沙盒：

无反应的示例：

.线路{
行程：#000；
笔划宽度：1.5px；
笔划线头：圆形；
}
.线--支点{
行程：#f00；
笔划宽度：2.5px；
}
.line--不活动{
行程：#ddd；
笔画宽度：1px；
}
var n=200，
数组=d3.无序排列（d3.范围（n）），
actions=快速排序（array.slice（））.reverse（）；
var margin={顶部：230，右侧：40，底部：230，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scalePoint（）.domain（d3.range（n））.range（[0，width]）；
var a=d3
.scaleLinear（）
.domain（[0，n-1]）
.范围（[-45,45]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var line=svg.append（“g”）
.attr（“类”、“行”）
.selectAll（“行”）
.数据（数组）
.enter（）.append（“行”）
.attr（“变换”，变换）
.attr（“y2”，高度）；
var transition=d3.transition（）
.持续时间（150）
.on（“开始”，函数开始（）{
var action=actions.pop（）；
开关（动作类型）{
案例“互换”：{
var i=动作[0]，
j=作用[1]，
li=直线组[0][i]，
lj=直线组[0][j]；
直线组[0][i]=lj；
直线组[0][j]=li；
每个（函数（）{line.transition（）.attr（“transform”，transform）；}）；
打破
}
案例“分割”：{
line.attr（“类”，函数（d，i）{
返回i==action.pivot？“行--pivot”
：action.left 1；
push（{type:“partition”，“left”：left，“pivot”：pivot，“right”：right}）；
枢轴=分区（左、右、枢轴）；
递归（左，枢轴）；
递归（枢轴+1，右）；
}
}
递归（0，array.length）；
返回动作；
}

请使用堆栈片段使您的代码可运行，这样我们就不必猜测您看到了什么。感谢您的回复，我尝试将其放在codesandbox中：我认为这显示了所有元素一次被设置动画，然后加速到最终状态的意外行为。您是否尝试将代码转换为？删除ReactJS，看看问题是否仍然存在谢谢，我想我已经添加了一个带有香草javascript的片段，并将react版本保留在codesandbox中，动画香草javascript似乎与D3页面上的版本相似。你知道是什么导致react版本的差异吗？我想我正在接近答案，由changin提供在line元素上的.style（'transform'，transform）属性中，React的结果与普通javascript版本中的结果类似。谢谢！