d3.format()用法

This page describes the D3 3.x API.

Formatting numbers is one of those things you don't normally think about until an ugly "0.30000000000000004" appears on your axis labels. Also, maybe you want to group thousands to improve readability, and use fixed precision, such as "$1,240.10". Or, maybe you want to display only the significant digits of a particular number. D3 makes this easy using a standard number format. For example, to create a function that zero-fills to four digits, say:

格式化數字是您通常不會考慮的事情之一,直到您的軸標簽上出現一個丑陋的“0.30000000000000004”,另外,也許你想組合成千上萬以提高可讀性,并使用固定的精度,如“$ 1,240.10”?;蛘撸苍S您只想顯示特定數字的有效數字。D3使用標準數字格式使其變得容易。 例如,創建一個零來填充到四位數的函數。

var zero = d3.format("04d");

Now you can conveniently format numbers:

現在您可以方便地格式化數字:

zero(2); // "0002"
zero(123); // "0123"

In addition to numbers, D3 also supports formatting and parsing dates, and comma-separated values.

除了數字,D3還支持格式化和解析日期和逗號分隔值。

Numbers

<a name="d3_format" href="#d3_format">#</a> d3.<b>format</b>(<i>specifier</i>)

Returns a new format function with the given string specifier. (Equivalent to locale.numberFormat for the default U.S. English locale.) A format function takes a number as the only argument, and returns a string representing the formatted number. The format specifier is modeled after Python 3.1's built-in format specification mini-language. The general form of a specifier is:

使用給定的字符串說明符返回一個新的格式函數。 (相當于默認的美國英語語言環境的locale.numberFormat。)格式函數使用數字作為唯一的參數,并返回一個表示格式化數字的字符串。格式說明符是在Python 3.1的內置格式規范迷你語言之后建立的。說明符的一般形式是:

 [?[fill]align][sign][symbol][0][width][,][.precision][type]

The fill can be any character other than "{" or "}". The presence of a fill character is signaled by the character following it, which must be one of the align options.

填充可以是除“{”或“}”之外的任何字符。 填充字符的存在由跟隨它的字符表示,它必須是對齊選項之一。

The align can be:

  • ("<") Forces the field to be left-aligned within the available space.

  • (">") Forces the field to be right-aligned within the available space. (This is the default).

  • ("^") Forces the field to be centered within the available space.

  • ("<")強制字段在可用空間內左對齊。

  • (">")強制字段在可用空間內對齊。 (這是默認值)。

  • ("^")強制字段以可用空間為中心。

The sign can be:

  • plus ("+") - a sign should be used for both positive and negative numbers.

  • minus ("-") - a sign should be used only for negative numbers. (This is the default.)

  • space (" ") - a leading space should be used on positive numbers, and a minus sign on negative numbers.

  • plus ("+") - 正數和負數都應該使用一個符號。

  • minus ("-") - 一個符號只能用于負數。 (這是默認值。)

  • space (" ") - 一個領先空間應該用于正數,負號上用負數。

The symbol can be:

  • currency ("$") - indicates that a currency symbol should be prefixed (or suffixed) per the locale. See Localization for more information on how to set the locale currency symbol.

  • base ("#") - for binary, octal, or hexadecimal output, prefix by "0b", "0o", or "0x", respectively.

  • currency ("$") - 表示貨幣符號應該根據區域設置加上(或后綴)。 有關如何設置區域設置貨幣符號的詳細信息,請參閱本地化。

  • base ("#") - 用于二進制,八進制或十六進制輸出,前綴分別為“0b”,“0o”或“0x”。

The "0" option enables zero-padding.

“0”選項啟用零填充。

The width defines the minimum field width. If not specified, then the width will be determined by the content.

width定義最小字段寬度。 如果未指定,則寬度將由內容確定。

The comma (",") option enables the use of a comma for a thousands separator.

comma (",")選項可以為千位分隔符使用逗號。

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".

precision表示在格式為"f"和"%"類型的格式的小數點后,小數點后面應顯示多少個數字,或格式為"g","r"和"p"。

The available type values are:

  • exponent ("e") - use Number.toExponential.

  • general ("g") - use Number.toPrecision.

  • fixed ("f") - use Number.toFixed.

  • integer ("d") - use 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.

  • exponent(“e”) - 使用Number.toExponential。

  • general(“g”) - 使用Number.toPrecision。

  • fixed(“f”) - 使用Number.toFixed。

  • integer(“d”) - 使用Number.toString,但忽略任何非整數值。

  • 四舍五入(“r”) - 舍入到精確有效數字,必要時用零填充固定(“f”)。如果沒有指定精度,則返回到一般符號。

  • 百分比(“%”) - 如固定,但乘以100,后綴為“%”。

  • 舍入百分比(“p”) - 如圓形,但乘以100,后綴為“%”。

  • 二進制(“b”) - 輸出基數2中的數字。

  • 八進制(“o”) - 輸出基數8中的數字。

  • 十六進制(“x”) - 輸出基數16中的數字,使用9以上數字的小寫字母。

  • 十六進制(“X”) - 輸出基數16中的數字,使用9以上數字的大寫字母。

  • 字符(“c”) - 在打印之前將整數轉換為相應的unicode字符。

  • SI前綴(“s”) - 像圓形,但單位后綴如“9.5M”為大,或“1.00μ”為微。

The type "n" is also supported as shorthand for ",g".

類型“n”也被支持作為“,g”的縮寫。

<a name="d3_formatPrefix" href="#d3_formatPrefix">#</a> d3.<b>formatPrefix</b>(<i>value</i>[, <i>precision</i>])

Returns the SI prefix for the specified value. If an optional precision is specified, the value is rounded accordingly using d3.round before computing the prefix. The returned prefix object has two properties:

返回指定值的SI前綴。 如果指定了可選精度,則在計算前綴之前,相應地使用d3.round進行舍入。 返回的前綴對象有兩個屬性:

  • symbol - the prefix symbol, such as "M" for millions.

  • scale - the scale function, for converting numbers to the appropriate prefixed scale.

  • 符號 - 前綴符號,例如數百萬的“M”。

  • 縮放 - 縮放函數,用于將數字轉換為適當的前綴標尺。

For example:

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="#d3_round">#</a> d3.<b>round</b>(<i>x</i>[, <i>n</i>])

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 function. For example:

返回小數點后舍入為n位數的值x。 如果省略n,則默認為零。 結果是一個數字。 值被四舍五入到功率減去n的10的最接近的倍數; 如果兩個倍數相等,則該值根據內置的回合函數進行四舍五入。 例如:

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 instead.

Strings

<a name="d3_requote" href="#d3_requote">#</a> d3.<b>requote</b>(<i>string</i>)

Returns a quoted (escaped) version of the specified string such that the string may be embedded in a regular expression as a string literal.

請注意,由于IEEE浮點精度,轉換為字符串時的結果數可能不精確; 要將數字格式化為具有固定小數點數的字符串,請改用d3.format。

d3.requote("[]"); // "\[\]"

Dates

See the d3.time module.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容