如何为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);
}

推荐答案

<$ c的过渡$ c>区域的工作方式与其他属性一样。仅在区域的情况下，我们插入字符串，而不是插入数字。当您调用带有某些区域函数时>数据，然后生成一个类似于 M0,213L4,214L9,215 ... L130,255.7 的字符串，它是用于 d 属性的DSL 。当您更改数据时，将传递到 area 函数，此字符串将更改并由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 作为区域数据

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屋！