radialLine 径向线生成器

Posted 禅楼望月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了radialLine 径向线生成器相关的知识,希望对你有一定的参考价值。


radialLine 径向线生成器

使用默认的角度半径访问器,和插值器函数构造一个 径向线生成器,返回的函数用以生成开放分段线性曲线、折线。
它和line生成器很相似,只是将line的x,y访问其换位angle,radius生成器。可以将它想想成一个圆规在画圆,但是在划的过程中不停的改变角度。 radius访问器和angle访问器结合使用,表示在特定的角度上的半径是多少。它们一般都接受函数(也可以写成常数)。
1f4a5_thumb注意:0°在12点钟方向。

数据格式

每个点出的半径和据12点钟的角度组成的对象数组。

  1. var data = [
  2. {r:100,angle:0},
  3. {r:100,angle:per*1},
  4. {r:100,angle:per*2},
  5. {r:100,angle:per*3},
  6. {r:100,angle:per*4},
  7. {r:100,angle:per*5},
  8. {r:100,angle:per*6}
  9. ];

生成构造器
  1. var radialLine = d3.radialLine()
  2. .radius(function (d) { return d.r;})
  3. .angle(function(d){ return d.angle;});
 

这是构造器的最简形式了,需要指定radiusangle的生成方式。
例子请移步这里


我们还可以对给构造器进行一些
curve
限制已达到不同的效果……

  1. var radialLine = d3.radialLine()
  2. .radius(function (d) { return d.r;})
  3. .angle(function(d){ return d.angle;})
  4. .curve(d3.curveBasis);

以上是关于radialLine 径向线生成器的主要内容,如果未能解决你的问题,请参考以下文章

Swift - 按下时为按钮创建径向线

用渐变填充条形图的径向条

postman 自动生成 curl 代码片段

postman 自动生成 curl 代码片段

径向树图布局:修复贝塞尔曲线

如何在 CSS 中创建径向菜单?