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中间。一切正常。

我试图在按钮点击时图形转换为指定节点的过程中使用一些动画。当用户单击将他或她带到指定节点的按钮时，是否可以设置转换动画以使转换最初开始变慢，然后加速，但随后在接近指定时再次减速节点？感谢

更新：

上面的代码带有＆＃34; easy＆＃34;包括给我这个控制台错误：

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

一个（多个）解决方案是ease使用d3.easeExpInOut，或d3.easePolyInOut.exponent(x)使用高指数（如x = 4或x = 5）。

请参阅此代码段。点击圆圈，看它从左向右移动，开始缓慢，加速然后再慢下来：

＆＃13;

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

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="200">
	<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>
	<line x1="360" x2="360" y1="100" y2="150" stroke="black" stroke-width="1"></line>
</svg>

＆＃13;

Answer 2

这是v3相当于Gerardo关于v4的帖子：

 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

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

2 个答案: