如何在d3 radialProgress中显示十进制数字

How to show decimal numbers in d3 radialProgress?

本文关键字：显示 十进制数字 radialProgress d3      更新时间：2023-09-26

Im使用d3组件radialProgress.js

但它不可能显示十进制数字，例如：

1.37%，仅显示1%。

有什么配置我可以更改吗？

谢谢。

[EDIT]

我发现了这个功能：

function labelTween(a) {
    var i = d3.interpolate(_currentValue, a);
    _currentValue = i(0);
    return function(t) {
        _currentValue = i(t);
        this.textContent = Math.round(i(t)) + "%";
    }
}

Wich用于：

 label.transition().duration(_duration)
                .tween("text",labelTween);

labelTween函数中的a参数是将出现在标签文本上的值。但是当调用labelTween函数时，这个值已经四舍五入了。

这是不可配置的，值在代码中四舍五入。您需要更换

.text(function (d) { return Math.round((_value-_minValue)/(_maxValue-_minValue)*100) + "%" })

带有

.text(function (d) { return (_value-_minValue)/(_maxValue-_minValue)*100 + "%" })

以禁用舍入。还有其他一些地方也需要这样做：

label.datum(Math.round(ratio*100));

应该是

label.datum(ratio*100);

和

this.textContent = Math.round(i(t)) + "%";

应该是

this.textContent = i(t) + "%";
相关文章：