Javascript 将D3 svg.transition设置为从慢速到快速再到慢速

我有一个D3图，允许用户单击按钮将它们带到指定的节点。按钮如下所示：

  <button type="button" class="btn btn-primary" ng-click="ctrl.panGraph(9)">Go to End</button>

结束

此按钮将使用户从单击时位于svg中的任何位置移动到最后一个节点的x和y坐标，id为9。单击后，此函数被称为：

  function panGraph (nodeId:any) {
                svgWidth = parseInt(svg.style("width").replace(/px/, ""), 10);
                svgHeight = parseInt(svg.style("height").replace(/px/, ""), 10);

                for (var i = 0; i < renderedNodes.length; i++) {
                    if (nodeID === renderedNodes[i].id) {
                        ctrl.selectedNode = renderedNodes[i];
                        var translate = [svgWidth / 2 -  renderedNodes[i].x, svgHeight / 2 - renderedNodes[i].y];
                        var scale = 1;
                        svg.transition().duration(4000).ease(d3.easeExpInOut).call(zoom.translate(translate).scale(scale).event);
                    }
                }
            }

函数图（nodeId:any）{
svgWidth=parseInt（svg.style（“width”）.replace（/px/，“”），10）；
svgHeight=parseInt（svg.style（“height”）.replace（/px/，“”），10）；
对于（var i=0；i

在上面的函数中，我有所有呈现在页面上的渲染节点，一旦找到匹配的ID，我就用它的X和Y坐标将SVG中间的指定节点中心。一切正常

我试图在图形转换到单击按钮时指定的节点期间使用一些动画。当用户单击将他或她带到指定节点的按钮时，是否可以设置过渡动画，使过渡开始时变慢，然后变快，但在接近指定节点时在结束时再次变慢？谢谢

更新：

上面包含“ease”的代码给了我这个控制台错误：

angular.js:13550 TypeError: Cannot read property 'indexOf' of undefined
at Object.d3.ease (d3.js:5844)
at Array.d3_transitionPrototype.ease (d3.js:8838)
at zoomOnNode (DiagramComponent.ts:1128)
at DiagramComponent.ts:1072
at Scope.$digest (angular.js:17073)
at Scope.$apply (angular.js:17337)
at HTMLButtonElement.<anonymous> (angular.js:25023)
at HTMLButtonElement.dispatch (jquery.js:4737)
at HTMLButtonElement.elemData.handle (jquery.js:4549)

angular.js:13550 TypeError:无法读取未定义的属性'indexOf'
在Object.d3.ease（d3.js:5844）
在Array.d3_transitionPrototype.ease（d3.js:8838）
在zoomOnNode（DiagramComponent.ts:1128）
在图表中，部件。ts:1072
范围$digest（angular.js:17073）
在范围内。$apply（angular.js:17337）
在HTMLButtoneElement。（见附件js:25023）
在HTMLButtonElement.dispatch（jquery.js:4737）
位于HTMLButtonElement.elemData.handle（jquery.js:4549）

一种（几种方案中的一种）解决方案是将

ease

与

d3.easeExpInOut

一起使用，或将

d3.easepoliinout.exponent（x）

与高指数（如x=4或x=5）一起使用

请参阅此片段。单击圆可以看到它从左向右移动，开始缓慢移动，加速，然后再次减速：

d3.选择（“圆圈”）。在（“单击”，函数（）上）{
d3.选择（this）.transition（）
.持续时间（4000）
.ease（d3.easeExpInOut）
.attr（“cx”，360）
});
以下是与Gerardo关于v4的帖子相当的v3：

 svg.transition().duration(1000).ease("exp-in-out").call(zoom.translate(translate).scale(scale).event);

有关从v3到v4的所有缓解等价物以及其他更改的列表：

这是正确的选择！不过，它需要一些改进，因为OP使用v3，而这是v4样式。请同时添加v3方法，并将其作为第二部分留作将来参考。谢谢Gerardo，这正是我需要的。我能在代码的svg.transition行上使用它吗？我更新了代码以反映我正在轻松尝试的内容。我必须能够访问我的功能，因为这是一个更大的角度组件的一部分，上述容易。当我点击我的按钮时，我似乎收到了一个控制台错误“TypeError:无法读取未定义的属性'indexOf'。今天早上我读了更多关于d3.ease的内容，但是如果我想将动画设置为从快到慢再到快，那么最好的选择是什么呢？我想为不同的情况提供两种选择。找到问题，在plunker中解决+1到高积云。我使用的是d3 bower版本3.5.17，这导致了我在上面的帖子中提到的“未定义索引”错误。当我在我的plunker中切换到版本4时，错误消失了，工作正常。v3有不同的方法吗？另外，使用v3实现从快到慢到快的过渡？谢谢我很高兴你找到了解决办法！顺便说一句，你可以在一段时间后接受你的答案。