如何为D3区域图表的区域设置动画？

Question

d3区域如何对其过渡进行动画处理？我已经看过线条的例子,但在动画区域找不到任何东西.

例如地区:

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

更新:我找到了一个面积图的例子,但我不明白.这个函数如何创建区域转换？

function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

Answer 1

areas作品的过渡就像其他属性一样.仅在区域的情况下,我们插入字符串而不是插值数字.当你用某些函数调用区域函数时data,它会产生一个看起来像的字符串M0,213L4,214L9,215 ... L130,255.7,它是用于d属性的DSL.当您更改data传递给area函数时,此字符串会更改,D3会对其进行插值.

关于您找到的示例,导致转换的有趣位仅是:

    .transition()
      .duration(2500)
      .attr("d", area);

另一部分的仅仅是交替的返回奇特的方式layers1,并layers0作为data对area连续通话功能.

  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })

Answer 2

聚会有点晚了，但是：

我通过修改原始的“区域”函数解决了这个问题，传递两个变量：数据和我希望绘制图表的字段：

var area = function(datum, field) {
    return d3.svg.area()
        .x(function(d) {
            return xScale(d.period_end);
        })
        .y0(height)
        .y1(function(d) {
            return yScale(d[field] || 0);
        })(datum);
    };

然后在绘制路径时，只需使用基本过渡即可。第一次，不传递“字段”，导致绘制零值，然后 - 在transition()之后 - 传递我想要的字段：

areaChart.append('path')
    .attr('class', 'area')
    .attr('d', area(chartData))
    .attr('fill', function() {
        return chartColor;
    })
    .attr('opacity', 0.15)
    .transition().duration(chartSettings.duration)
    .attr('d', area(chartData, 'value'));

无需子功能即可很好地工作。当然，可以对折线图执行完全相同的操作。

Answer 3

感谢@neptunemo 的建议。但是，您的代码对于您的问题来说太具体了。我想用一个一般的案例来更好地说明你的想法：

请查看 d3noob 示例中的完整代码：https ://bl.ocks.org/d3noob/119a138ef9bd1d8f0a8d57ea72355252

区域生成器的原始代码：

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });

区域生成器修改代码：

var area = function(datum, boolean) {
    return d3.area()
    .y0(height)
    .y1(function (d) { return y(d.close); })
    .x(function (d) { return boolean ? x(d.date) : 0; })
    (datum);
}

• datum 是获取数据，
• boolean 是控制：
  • .x() （如果您想要沿 x 轴的动画）
  • .y1() （如果您想要沿 y 轴的动画）

通过将 boolean 设置为false，我们可以将.x()或设置.y1()为0。

这将帮助我们在触发转换过程之前设置区域的初始状态。

区域过渡修改代码：

svg.append("path")
    .data([data])
    .attr("class", "area")
    .attr("d", d => area(d, false))
    .attr("fill", "lightsteelblue")
    .transition()
    .duration(2000)
    .attr("d", d => area(d,true));

效果？

• 控制的情况 .x()

• 控制的情况 .y1()

注意：我遇到的问题是我无法同步线和区域的动画:(