設置D3 svg.transition從慢到快到慢

我有一個D3圖形，允許用戶單擊按鈕將它們帶到指定的節點。該按鈕看起來是這樣的：設置D3 svg.transition從慢到快到慢

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

這個按鈕會從哪裏他們在點擊的時候SVG用戶，到最後一個節點的X和Y座標，與9上的ID點擊該功能被稱爲：

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的中間。這一切都很好。

我想在圖表翻譯到按鈕單擊指定節點的時候使用一些動畫。當用戶點擊將他或她帶到指定節點的按鈕時，是否可以對轉換進行動畫處理，以便轉換最初開始緩慢，然後加速，但隨後在接近指定時再次減慢節點？由於

UPDATE：

與「緩解」上面的代碼incluided給了我這個控制檯錯誤：

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)

來源

2016-08-11 bschmitty

之一（從幾個）解決方案是使用ease與d3.easeExpInOut，或d3.easePolyInOut.exponent(x)用一個高指數（如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>

來源

2016-08-12 03:40:14

這是正確的路！不過，由於OP使用v3而v4風格，因此需要進行一些改進。請同時添加v3方法並將其作爲未來參考的第二部分。 – altocumulus

謝謝Gerardo，這正是我需要的。我可以在我的代碼中使用svg.transition行嗎？我更新了我的代碼，以反映我正在嘗試的輕鬆方式。我必須能夠在上面的函數中訪問輕鬆，因爲這是更大角度組件的一部分。我似乎得到一個控制檯錯誤「TypeError：當我點擊我的按鈕時，無法讀取'undefined'屬性'indexOf'。今天早上我正在閱讀更多有關d3.ease的內容，但如果我想將動畫設置爲從快到慢從快到快，那麼最佳選擇是什麼？我想爲不同情況提供兩種選擇。 – bschmitty

發現這個問題，找出一個笨蛋。 +1至高積雲。我正在使用d3 bower版本3.5.17，這會導致我在上面提到的「未定義的索引」錯誤。當我切換到版本4的時候，錯誤消失了，它工作正常。 v3有不同的方法嗎？另外，v3的方法是從快速轉變爲慢速還是快速？謝謝 – bschmitty

這裏相當於赫拉爾多的崗位V3關於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

來源

2016-08-12 20:56:13 bschmitty

我很高興你找到了解決方案！順便說一句，你可以在一段時間後接受你的答案。 –

設置D3 svg.transition從慢到快到慢

回答

相關問題