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

当点击路径时，我希望能够设置弧的动画以打开并展平到水平线。我怎样才能做到这一点？任何意见是极大的赞赏。谢谢!!

Answer 1

开口成弧线的弧形就像弧的内外半径一起生长，并且末端角度与起始角度分开以保持相同的弧长。

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

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

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

使用d3.js将弧动画化为水平线

1 个答案: