首页 > 代码库 > 弦生成器

弦生成器

弦生成器→d3.ribbon()。返回的函数使用二次贝塞尔曲线连接两个圆弧,以构成封闭的弦的路径数据。
d3.ribbon()返回函数的作用来看,弦其实可分为两部分,一部分为两个圆弧,一部分为二次贝塞尔曲线。贝塞尔曲线是d3.ribbon()返回的函数帮我们生成的,那我们只需要画两个圆弧(起始圆弧,结束圆弧)就可以了。画圆弧(arc)的需要的参数为半径、起始角度、结束角度。因此我们就可以知道弦生成器需要的参数形式为:
  1. var data = {
  2. source : {
  3. radius : XXX,
  4. startAngle : XXX,
  5. endAngle : XXX
  6. },
  7. target : {
  8. radius : XXX,
  9. startAngle : XXX,
  10. endAngle : XXX
  11. }
  12. };
既然需要这样的参数,就需要指定每个参数的访问器函数,因此d3提供了:ribbon.source([source])、ribbon.target([target])、ribbon.radius([radius])、ribbon.startAngle([angle])、ribbon.endAngle([angle])。
 
源码:
 
<script type="text/javascript" src="http://runjs.cn/gist/ffa1hbmf"></script><iframe style="height: 300px; width: 100%" src="http://sandbox.runjs.cn/show/ffa1hbmf" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

弦生成器