格式化 · D3.js API 中文手冊

> [Wiki](Home) ? [[API--中文手冊]] ? [[核心函數]] ? **格式化** * 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者: * 郵箱：zhang_tianxu@sina.com * QQ群：[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115 格式化數字是不經常用到的，只有在例如丑陋的"0.30000000000000004"出現在你的數軸標簽上時，或者你想要使用固定精度將幾千的數字組織為更加可讀的形式，例如"$1,240.10"，再或者你可能只想展示一個特定的數字的顯著位。D3使用標準的數字格式化使得一切變得簡單，例如，創建一個用0補齊4位數字的函數，可以這樣： ```javascript var zero = d3.format("04d"); ``` 現在，你就可以調用 zero 來很方便的格式化你的數字了： ```javascript zero(2); // "0002" zero(123); // "0123" ``` 當然，除了數字，D3還支持格式化和解析日期，逗號分隔字串。 ## Numbers <a name="d3_format" href="#d3_format">#</a> d3.format(specifier) 返回給定的字符串（specifier）的格式化函數（等同于適用默認的美國英語語言環境的[locale.numberFormat](Localization#locale_numberFormat))。唯一的入參是數字，返回代表格式化數字的字符串。這個格式化規范模擬的是Python 3.1內置的格式化規范語言[[format specification mini-language|http://docs.python.org/release/3.1.3/library/string.html#formatspec]]。規范（specifier）的通常格式如下: ``` [?[fill]align][sign][symbol][0][width][,][.precision][type] ``` *fill*可以是任意字符，除了 “{“ 和 “}”，fill 由緊跟它的*align*選項標識。 *align*有三種選項： * ("<") 在可用的區域左對齊。 * (">") 在可用的區域右對齊（默認）。 * ("^") 在可用的區域居中。 *sign*可能是： * plus ("+") - 可以用于正數或負數。 * minus ("-") - 僅僅用于負數（默認）。 * space (" ") - 前面的空格應該用在正數前面，而減號必須用在負數！ *symbol*可能是： * currency ("$") - a currency symbol should be prefixed (or suffixed) per the locale. * base ("#") - for binary, octal, or hexadecimal output, prefix by "0b", "0o", or "0x", respectively. The "0" option enables zero-padding. The *width* defines the minimum field width. If not specified, then the width will be determined by the content. The *comma* (",") option enables the use of a comma for a thousands separator. The *precision* indicates how many digits should be displayed after the decimal point for a value formatted with types "f" and "%", or before and after the decimal point for a value formatted with types "g", "r" and "p". The available *type* values are: * exponent ("e") - use [[Number.toExponential|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/toExponential]]. * general ("g") - use [[Number.toPrecision|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/toPrecision]]. * fixed ("f") - use [[Number.toFixed|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/toFixed]]. * integer ("d") - use [[Number.toString|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/toString]], but ignore any non-integer values. * rounded ("r") - round to *precision* significant digits, padding with zeroes where necessary in similar fashion to fixed ("f"). If no *precision* is specified, falls back to general notation. * percentage ("%") - like fixed, but multiply by 100 and suffix with "%". * rounded percentage ("p") - like rounded, but multiply by 100 and suffix with "%". * binary ("b") - outputs the number in base 2. * octal ("o") - outputs the number in base 8. * hexadecimal ("x") - outputs the number in base 16, using lower-case letters for the digits above 9. * hexadecimal ("X") - outputs the number in base 16, using upper-case letters for the digits above 9. * character ("c") - converts the integer to the corresponding unicode character before printing. * SI-prefix ("s") - like rounded, but with a unit suffixed such as "9.5M" for mega, or "1.00μ" for micro. The type "n" is also supported as shorthand for ",g". <a name="d3_formatPrefix" href="#d3_formatPrefix">#</a> d3.formatPrefix(value[, precision]) Returns the [SI prefix](http://en.wikipedia.org/wiki/Metric_prefix) for the specified *value*. If an optional *precision* is specified, the *value* is rounded accordingly using [d3.round](#d3_round) before computing the prefix. The returned prefix object has two properties: * symbol - the prefix symbol, such as "M" for millions. * scale - the scale function, for converting numbers to the appropriate prefixed scale. For example: ```js var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // "G" console.log(prefix.scale(1.21e9)); // 1.21 ``` This method is used by d3.format for the `s` format. <a name="d3_round" href="Formatting#d3_round">#</a> d3.round(x[, n]) Returns the value *x* rounded to *n* digits after the decimal point. If *n* is omitted, it defaults to zero. The result is a number. Values are rounded to the closest multiple of 10 to the power minus *n*; if two multiples are equally close, the value is rounded up in accordance with the built-in [[round|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/round]] function. For example: ```js d3.round(1.23); // 1 d3.round(1.23, 1); // 1.2 d3.round(1.25, 1); // 1.3 d3.round(12.5, 0); // 13 d3.round(12, -1); // 10 ``` Note that the resulting number when converted to a string may be imprecise due to IEEE floating point precision; to format a number to a string with a fixed number of decimal points, use [d3.format](Formatting#d3_format) instead. ## Strings <a name="d3_requote" href="Formatting#d3_requote">#</a> d3.requote(string) Returns a quoted (escaped) version of the specified *string* such that the string may be embedded in a regular expression as a string literal. ```js d3.requote("[]"); // "\[\]" ``` ## Dates See the [[d3.time|Time-Formatting]] module.