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