如果数字有小数位，将其格式化为只保留两位小数。

Question

我希望d3能将我的数字格式化为两位小数，只有当它有小数值时才需要格式化。 另外，我希望它能够使用一个单一的格式化函数。

目前，我一直在使用这个。有没有办法可以改进它以使其能够适应更多情况？

d3.format(",.2f")(10101); //10,101.00 which must be displayed as 10,000 only

d3.format(",.2f")(12334.2); //12,334.20 this is okay

- Sabbiu Shah

Answer 1

我希望它可以使用一个单一的格式函数来工作。

好吧，那是不可能的。D3格式函数不能像那样适应您传递给它们的数字。

但是，您可以有两个格式函数，并测试传递的数字是否具有小数位或没有小数位。这是一种可能的测试方式:

number % 1

返回整数值的是0。

然后，在三目运算符中，你可以选择使用哪个d3.format函数：

!(number % 1) ? someFormat(number) : otherFormat(number)

这是一个演示：

var formatInteger = d3.format(",");
var formatDecimal = d3.format(",.2f");

var number1 = 10101;
var number2 = 12334.2;

function format(number){
return !(number % 1) ? formatInteger(number) : formatDecimal(number)
}

console.log(format(number1))
console.log(format(number2))

<script src="https://d3js.org/d3.v4.min.js"></script>

- Gerardo Furtado

Answer 2

如果您使用“~”符号删除任何末尾的零，则可以最接近该效果。因此在您的情况下，格式应为“, .2 ~f”。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
console.log(d3.format(",.2~f")(10101));
console.log(d3.format(",.2~f")(12334.2));
</script>

更多关于 d3-format 的信息请见这里：https://observablehq.com/@d3/d3-format

- Xaquín G.V.

Answer 3

你可以尝试这个：

const formattedValue = value >= 100000
                ? value % 1 === 0
                  ? SI(value).replace(".0", "")
                  : SI(value)
                : value

- Sridhar Sg