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

我发现了这个问题，但无法将其转化为我的问题：

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

如何使d3区域过渡源于底部

2 个答案: