如何使d3区域过渡从底部开始

Question

如何使区域的过渡起源于 svg 的底部而不是顶部？使用此区域函数更改高度时，它将从顶部开始。

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

我找到了这个 SO 问题，但无法将其转化为我的问题：

D3.js Transitions

更新

这里是代码：http://jsfiddle.net/g3yS5/12/

区域 a1 位于顶部，当过渡到 a2 时，它从上到下推动。我想问题的解决方案包括让该区域最初渲染到底部？如果是这样，我该怎么做？

Answer 1

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.

Answer 2

过渡从您当前正在制作动画的属性的任何值开始，因此您可以在过渡开始之前简单地更改该值：

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。我必须查看您的代码以获得更具体的解决方案。