10

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

3 回答 3

8

作品的过渡areas就像其他属性一样。只有在区域的情况下，我们才插入字符串而不是插入数字。当你用 some 调用area函数时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;
      })
于 2013-11-03T10:54:21.413 回答
6

感谢@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()

在此处输入图像描述

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

于 2017-12-27T03:16:12.170 回答
4

派对迟到了，但是：

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

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

无需子功能即可很好地工作。当然，折线图也可以这样做。

于 2016-03-03T06:43:31.580 回答