Question

我是d3菜鸟，所以我需要一些关于创建圆形仪表图表的帮助。图表应根据特定值从红色切换为黄色到绿色。

问题是我想将图表中的文本显示为0到100，但现在它是360到0.这可能吗？

另外，我如何将值定位在内圈的中心点？

我使用以下代码随机更改值：

  var pi = Math.PI;
  var num = Math.random() * 360;
  var numPi = Math.floor(num - 360) * -(pi/180);

我做了一个简单的傻瓜来展示我的尝试：http://plnkr.co/edit/CREdBeHKxre2ISNqOD6N?p=preview

Answer 1

你的意思是说360会出现100吗？ 0为0？如果是这样，只需找到从[0,360]移动到[0,100]或甚至到[0,1]的函数

并且360也是最高的：从：

var numPi = Math.floor(num - 360) * -(pi/180);

为：

var numPi = Math.floor(num) * -(pi/180);

另见： http://www.brightpointinc.com/clients/brightpointinc.com/library/radialProgress/index.html?source=d3js

修改：

更改此行：

current.transition().text(Math.floor((num));// Text transition

是：

current.transition().text(Math.floor((num/360)*100));// Text transition

所以现在你得到的值从0到100

D3圆形图表比例

1 个答案: