如何使d3區域轉換從底部發起

如何讓一個區域的轉換始於svg的底部而不是頂部？使用此區域功能更改高度時，它將始於頂部。如何使d3區域轉換從底部發起

area: function(width, height) { 
    var x = this.xScale(width), 
     y = this.yScale(height); 

    return d3.svg.area() 
      .x(function(d) { return x(d.x); }) 
      .y0(height) 
      .y1(function(d) { return y(d.y); }); 
}

轉型新的高度^h：

var area = this.area(w, h); 

svg.datum(data) 
      .transition() 
      .ease('linear', 1, .3) 
      .duration(1000) 
      .attr('d', area);

我發現這太問題，但不能把它翻譯我的問題：

D3.js Transitions

更新

這裏是代碼：http://jsfiddle.net/g3yS5/12/

區域a1位於頂部，當轉換到a2時，它從上到下推動。我猜這個問題的解決方案涉及到最初讓區域渲染到底部？如果是的話我怎麼能這樣做？

來源

2014-04-18 el_pup_le

你是說第一次從無路徑轉換到渲染路徑時出現有問題的動畫？還是在從一條渲染路徑到另一條渲染路徑的任意過渡期間？ – meetamit

@meetamit這兩個狀態之間的數據保持不變，我將該區域更改爲新的高度。 –

是this你想要什麼？

svg.select('path') 
    .datum(data) 
    .attr('transform', 'translate(0, 80)') // <---- here 
    .transition() 
    .ease('linear', 1, .3) 
    .duration(1000) 
    .attr('transform', 'translate(0, 0)') // <---- then here 
    .attr('d', a2);

它首先轉化的路徑是在新的高度的底部，然後躍遷回到其自然位置（注：翻譯是硬編碼爲80，你想計算它的基礎上高度三角洲）。這會導致路徑跳轉到新位置，這可能是您所期望的。

否則，您也可以分兩步進行轉換。 See this jsFiddle。

來源

2014-04-18 07:13:18 meetamit

我希望該區域在轉換之前最初處於底部，即使我只是在追加路徑時才進行翻譯。謝謝：） –

視線從任何價值，你目前正在製作動畫的屬性是開始，所以在過渡開始之前，你可以簡單地改變該值：

svg.datum(data) 
    .attr('d', startingArea) // set initial 'state' 
    .transition().ease('linear', 1, .3).duration(1000) 
    .attr('d', area);

在這種情況下，startingArea可能看起來很像你現有的area函數，但y0可能是0，或者可能是y1將是height。我不得不看你的代碼更多的更具體的解決方案。

來源

2014-04-18 05:20:20

嗯，這就是我正在做的事情，我將第二個區域的高度改爲更大的值。看看我鏈接的SO問題的例子。我有同樣的問題，但有一個區域。 –

http://jsfiddle.net/gorkem/ECRMd/ –

@amiawizard你想完成什麼？ –

如何使d3區域轉換從底部發起

回答

相關問題