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

前端之家收集整理的这篇文章主要介绍了动画 – 如何为D3区域图表的区域设置动画?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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);
}

解决方法

区域的过渡与其他属性一样.仅在区域的情况下,我们是 interpolating strings而不是内插数字.当您使用某些数据调用 area函数时,它会生成一个类似于M0,213L4,214L9,215 … L130,255.7的字符串,这是一个 DSL used for the d attribute.当您更改传递给区域函数的数据时,字符串更改,D3插入它们.

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

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

另一部分仅仅是交替返回layers1和layers0作为连续调用的区域函数的数据的奇特方式.

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

猜你在找的JavaScript相关文章