d3.js formatPrefix()用法及代碼示例

D3.js中的formatPrefix()函數用於將值轉換為給定編號的適當SI前綴的單位，例如pico，femto，milli等。

用法:

d3.formatPrefix(specifier, value);

參數：它采用上麵給出和下麵描述的兩個參數。

Specifier:說明符告訴格式樣式。
Value:它是定點格式格式化之前的指定數字參考值。

返回值：此方法返回一個函數。

下麵給出的是formatPrefix()函數的一些示例。

範例1：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js --> 
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    // It is the Floating point up to two decimals 
    // value is 1e-1 
    console.log(d3.formatPrefix(".4s", 1e-1)(58)) 
    // It sets the SI-Prefix with two significant digits 
    // value is 1e-2 
    console.log(d3.formatPrefix(".4s", 1e-2)(42000)) 
    // Currency sign i.e $ 
    // value is 1e-3 
    console.log(d3.formatPrefix("$, ", 1e-3)(4200)) 
    // Filled with dots and centered in between them 
    // value is 1e-4 
    console.log(d3.formatPrefix("^, ", 1e-14)(42.444)) 
    // Localised fixed-point currency 
    // value is 1e-5 
    console.log(d3.formatPrefix("($.2f", 1e-5)(42.444)) 
    // value is 1e-8 
    console.log(d3.formatPrefix("#", 1e-18)(2)) 
    // value is 1e-9 
    console.log(d3.formatPrefix("#s", 1e-9)(42)) 
    // Number is grouped thousand with two significant digits 
    // value is 1e-12 
    console.log(d3.formatPrefix(", .2r", 1e-12)(421)) 
 </script> 
</body> 
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport"
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js --> 
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    // It is the Floating point up to two decimals 
    // value is 1e-24 
    console.log( 
"y- yocto:", d3.formatPrefix(".4s", 1e-24)(58)) 
    // It sets the SI-Prefix with two significant digits 
    // value is 1e-21 
    console.log( 
"z-zepto:", d3.formatPrefix(".4s", 1e-21)(42000)) 
    // Currency sign i.e $ 
    // value is 1e-15 
    console.log( 
"f-femto:", d3.formatPrefix("$, ", 1e-15)(4200)) 
    // value is 1e-6 
    console.log( 
"micro:", d3.formatPrefix("^, ", 1e-6)(42.444)) 
    // value is 1e+3 
    console.log( 
"k-kilo:", d3.formatPrefix("($.2f", 1e+3)(42.444)) 
    // value is 1e-9 
    console.log( 
"n-nano:", d3.formatPrefix(".4s", 1e-9)(4)) 
    // value is 1e+18 
    console.log( 
"E-exa:", d3.formatPrefix(".4s", 1e+18)(424)) 
    // value is 1e+24 
    console.log( 
"Y-yotta:", d3.formatPrefix(".2f", 1e+24)(0)) 
 </script> 
</body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js formatPrefix() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。