title: Setting D3 svg.transition to go from slow to fast to slow
body: <p>I have a D3 graph that allows a user to click a button to take them to a specified node. The button looks like this:</p>
  
  <pre><code>  &lt;button type="button" class="btn btn-primary" ng-click="ctrl.panGraph(9)"&gt;Go to End&lt;/button&gt;
  </code></pre>
  
  <p>This button will take the user from wherever they are in the svg at the time of click, to the x and y coordinates of the last node, with the id of 9. On click this function is called:</p>
  
  <pre><code>  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 &lt; 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);
                      }
                  }
              }
  </code></pre>
  
  <p>In  the above function I have all the rendered nodes that have been rendered on the page, once I find the matching id I use its x and y coordinates to center the specified node in the middle of the svg. That all works fine. </p>
  
  <p>I am trying to use some animations during the time that the graph is translating to the specified node on button click. When the user clicks the button that takes him or her to the specified node, is it possible to animate the transition so that the transition initially starts slow, then speeds up, but then slows down again at the end as it gets close to the specified node? Thanks</p>
  
  <p>UPDATE:</p>
  
  <p>The above code with the "ease" incluided gives me this console error:</p>
  
  <pre><code>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.&lt;anonymous&gt; (angular.js:25023)
  at HTMLButtonElement.dispatch (jquery.js:4737)
  at HTMLButtonElement.elemData.handle (jquery.js:4549)
  </code></pre>