设置 D3 svg.transition 从慢到快再到慢

Question

我有一个 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);
                    }
                }
            }

在上面的函数中，我拥有已在页面上渲染的所有渲染节点，一旦找到匹配的 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)

Answer 1

以下是与 Gerardo 关于 v4 的帖子等效的 v3：

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

有关从 v3 到 v4 的所有缓动等效项以及其他更改的列表：

https://github.com/d3/d3/blob/master/CHANGES.md