在 d3 中显示仪表中的小数点

【问题标题】：Showing decimal point in gauge meter in d3在 d3 中显示仪表中的小数点
【发布时间】：2017-11-27 12:03:14
【问题描述】：

我正在使用 reactjs 创建项目。我正在我当前的项目中集成仪表。我已经在我的项目中成功实现了仪表，但只有一个问题是我想显示十进制值。这里正在使用：

https://www.npmjs.com/package/react-d3-speedometer

这是我的代码：

ReactSpeedometer forceRender = {
                        false
                    }
                    value = {
                        this.state.meter1value
                    }
                    maxValue = {
                        this.props.vnfTarget
                    }
                    segments = {
                        3
                    }
                    width = {
                        400
                    }
                    height = {
                        230
                    }
                    needleColor = 'green' /
                    >

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案1】：

深入react-d3-speedometer的源码可以找到这个变量

// default config that are 'not' configurable
        var default_config = {
            ringInset: 20,

            pointerWidth: 10,
            pointerTailLength: 5,
            pointerHeadLengthPercent: 0.9,

            minAngle: -90,
            maxAngle: 90,

            labelFormat: d3Format('d'),
            labelInset: 10,

            // calculate the ReactSpeedometer 'parentNode' width/height; it might be used if fluidWidth: true
            parentWidth: self.gaugeDiv.parentNode.clientWidth,
            parentHeight: self.gaugeDiv.parentNode.clientHeight
        };

你需要根据你的需要更改以下行

labelFormat: d3Format('d'),

从 d3 文档 here 中选择一种格式

【讨论】：