如何为 D3 面积图的区域设置动画? [英] How to animate areas of a D3 area chart?

问题描述

如何让 d3 区域的过渡动画化?我看过线条的例子，但找不到任何关于动画区域的内容.

How can d3 areas have their transitions animated? I've seen examples for lines but can't find anything on animating an area.

例如区域:

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

更新:我找到了一个区域的示例图表，但我不明白.这个函数是如何创建区域过渡的?

Update: I've found an example for an area chart but I don't understand it. How is this function creating the area transition?

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

推荐答案

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

The transition of areas works just like for other attributes. Only in case of areas, we are interpolating strings instead of interpolating numbers. When you call the area function with some data, then it produces a string which looks like M0,213L4,214L9,215 ... L130,255.7, which is a DSL used for the d attribute. When you change the data you pass to the area function, this string changes and D3 interpolates them.

关于你发现的例子，引起转换的有趣的一点是:

Regarding the example you have found, the interesting bit which causes the transition is only this:

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

另一部分只是将layers1 和layers0 作为area 的data 交替返回的一种奇特方式> 连续调用的函数.

The other part merely is a fancy way of alternatively returning layers1 and layers0 as the data for the area function on consecutive calls.

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

这篇关于如何为 D3 面积图的区域设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！