Question

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

例如区域：

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

更新：我找到了面积图的example，但我不明白。这个函数如何创建区域转换？

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

Answer 1

areas的转换与其他属性一样。仅在区域的情况下，我们interpolating strings而不是内插数字。当您使用data调用area函数时，它会生成一个类似于M0,213L4,214L9,215 ... L130,255.7的字符串，即DSL used for the d attribute。当您更改传递给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

有点迟到了，但是：

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

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

然后在绘制路径时，只需使用基本过渡。第一次，没有传递'field'，导致绘制零值，然后 - 在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轴动画）

通过将布尔值设置为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()

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

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

3 个答案: