D3 svg.transitionを低速から高速に設定する

Question

私は、ユーザーがボタンをクリックして指定されたノードに移動できるようにするD3グラフを持っています。ボタンは次のようになります。

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

このボタンは9上のIDで、最後のノードのx、y座標に、彼らはクリックの時点でSVGにどこからユーザーがかかりますクリックこの関数が呼び出される：上記の関数で

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); 
        } 
       } 
      } 

私はで指定されたノードを中心に、そのx座標とy座標を使用して、一致するIDが見つかったら、私は、ページ上にレンダリングされたすべてのレンダリングされたノードを有しますsvgの真中。それはすべて正常に動作します。

グラフがボタンクリックで指定されたノードに変換されている間に、いくつかのアニメーションを使用しようとしています。ユーザーが指定されたノードに移動するボタンをクリックすると、トランジションが最初に遅く始まるようにトランジションをアニメートすることができます。スピードアップしますが、最後にもう一度スローダウンします。ノード？おかげ

UPDATE：

私にこのコンソールのエラーを与えるincluided "楽" で上記のコード：

ソリューションがで d3.easeExpInOutと ease、または d3.easePolyInOut.exponent(x)を使用することです（いくつかのうち）

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

ワン高い指数（x = 4またはx = 5など）。

このスニペットをご覧ください。それは、遅い開始、左から右へ移動するスピードアップし、その後再び減速見るために円をクリックしてください：ここで

d3.select("circle").on("click", function(){ 
 
\t d3.select(this).transition() 
 
\t .duration(4000) 
 
\t .ease(d3.easeExpInOut) 
 
\t .attr("cx", 360) 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="400" height="200"> 
 
\t <circle cx="40" cy="100" r="30" fill="teal"></circle> 
 
    <line x1="40" x2="40" y1="100" y2="150" stroke="black" stroke-width="1"></line> 
 
\t <line x1="360" x2="360" y1="100" y2="150" stroke="black" stroke-width="1"></line> 
 
</svg>

Answer 2

はV4についてはGerardoさんの投稿へのV3と同等です：

：V4および他の変更をV3からのすべての緩和の均等物のリストについて

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