使用d3.js将弧形动画转换为水平线

Question

我正在尝试将一条弧线动画转换成水平线，但不确定是否可能以及最佳方法是什么。我使用路径生成器绘制弧线：

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

当路径被点击时，我希望能够将弧线动画展开并变平成一条水平线。我该怎么做？非常感谢您的任何建议。谢谢！

- akire

---

我会使用SVG编辑器，导入您感兴趣的弧形。然后，我会手动将其拉直，查看哪些值发生了变化以及如何变化 - 然后我会确定曲线弧和相应的直线之间的转换。（我认为您的线条也必须是一条弧线，才能执行转换） - alm

Answer 1

一条弧线转化为一条直线，就像弧线的内外半径合并在一起，起始角度与结束角度分离以保持相同的弧长。

首先，您需要知道弧线的长度（半径乘以起始角和结束角之间的弧度）。

然后增加半径并减小起始角和结束角之间的距离，以使弧长保持不变。请记得移动弧线的原点以补偿半径的增长。

随着半径接近非常大的值，起始角和结束角之间的弧度将缩小，直到几乎没有区别，此时您将得到一条直线。

- whiterook6