4

我正在尝试将弧线动画化为水平线，但不确定这是否可行以及最好的方法是什么。我正在使用路径生成器绘制弧线：

var arc = d3.svg.arc()
  .outerRadius(function(d){ return d.outerRadius; })
  .innerRadius(function(d){ return d.outerRadius*0.6; })
  .startAngle(function(d){ return d.startAngle; })
  .endAngle(function(d){ return d.endAngle; });

然后我正在读取 json 数据并使用饼图布局附加弧：

var donut = d3.layout.pie();
var paths = arcs.selectAll("path").data(donut(json));
  paths.enter().append("path")
  .on("click", anim)
  .attr("d", arc).transition().duration(1000)
  .attrTween("d", tweenPie);

单击路径时，我希望能够对弧进行动画处理以打开并变平为水平线。我怎样才能做到这一点？任何意见是极大的赞赏。谢谢！！

4

1 回答 1

3

一条圆弧开成一条线就像一条圆弧的内半径和外半径一起增长，并且结束角度与起始角度分开以保持相同的弧长。

首先，您知道弧的长度（开始和结束之间的半径乘以弧度）

然后增加半径并减小起点和终点之间的距离，使弧长保持不变。记得移动圆弧的原点以补偿不断增长的半径。

当半径接近一个非常大的值时，开始和结束之间的弧度会缩小，直到几乎没有差异或没有差异，此时您将有一条线。

于 2013-01-31T17:04:42.787 回答