> [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
實現可視化要經常和顏色打交道。雖然你的電腦顯示屏懂得很多的顏色,但這對通過js來配置顏色幫助不大。所以d3提供多種顏色空間的表示,包括 RGB, HSL,LAB 和 HCL,可實現規范、插值、轉換和操作(例如顏色的明暗)。
注意:雖然你可以直接操作顏色,當時也需要參考一下D3對于interpolateRgb, interpolateHsl 和 scales等內置顏色插值的實現。
如果你想查閱調色盤,請查閱ordinal scales 。
RGB
# d3.rgb(r, g, b)
通過輸入的參數r, g 和 b,創建一個RGB類型顏色對象。參數必須是在0-255之間的整數。你可以通過訪問返回的顏色對象的r, g 和 b屬性值來獲取參數r, g, b的值。
# d3.rgb(color)
? rgb decimal - "rgb(255,255,255)"
? hsl decimal - "hsl(120,50%,20%)"
? rgb hexadecimal - "#ffeeaa"
? rgb shorthand hexadecimal - "#fea"
? named - "red", "white", "blue"
通過解析輸入的字符串參數,創建一個RGB類型顏色對象。如果參數 color 不是一個字符串,參數就會被強制類型轉換為字符串類型。因此,該構造函數可以用來創建一個已經存在的顏色對象的副本,或者是將d3.hsl強制類型轉換為RGB。字符串參數可以有多種形式:
? rgb十進制- "rgb(255,255,255)"
? hsl十進制- "hsl(120,50%,20%)"
? rgb十六進制- "#ffeeaa"
? rgb簡寫十六進制- "#fea"
? 名稱 - "red", "white", "blue"
輸出的顏色將以紅、綠和藍的整數通道形式存儲(整數范圍:[0,255])。顏色通道可以通過顏色對象的屬性 r, g 和 b 訪問到。可支持的列表named colors可以通過CSS指定。如果是HSL空間的顏色,可以轉換成在RGB空間相同類型的值,和 hsl.rgb類似。
# rgb.brighter([k])
返回顏色的一個高亮副本。每個顏色通道值將乘以0.7 ^ -k. 如果參數 k 被忽略,將使用默認值1。通道值上限值255,下限值30.
# rgb.darker([k])
返回低顏色的一個亮度副本。每個顏色通道值將乘以0.7 ^ k. 如果參數 k 被忽略,將使用默認值1。
# rgb.hsl()
返回一個HSL空間的等值顏色對象。請查閱 d3.hsl 了解更多關于返回顏色對象的信息. 文檔 CSS3 Color Module Level 3中有關于RGB到HSL轉換的信息。該函數是上述轉化的逆操作。
# rgb.toString()
將RGB顏色轉換成一個十六進制數的字符串,如 such as "#f7eaba"。
HSL
# d3.hsl(h, s, l)
通過輸入的參數h, s和l,創建一個HSL顏色對象。創建新的HSL顏色,通過指定的色度h,飽和度s和亮度l。其中色度h取值范圍[0,360]。飽和度和亮度取值范圍 0,1。你可以通過訪問返回的顏色對象的h, s 和l 屬性值來獲取顏色的通道屬性.
# d3.hsl(color)
? rgb decimal - "rgb(255,255,255)"
? hsl decimal - "hsl(120,50%,20%)"
? rgb hexadecimal - "#ffeeaa"
? rgb shorthand hexadecimal - "#fea"
? named - "red", "white", "blue"
通過解析輸入的字符串參數,創建一個HSL類型顏色對象。如果參數 color 不是一個字符串,參數就會被強制類型轉換為字符串類型。因此,該構造函數可以用來創建一個已經存在的顏色對象的副本,或者是將d3.rgb強制類型轉換為HSL。字符串參數可以有多種形式:
? rgb十進制- "rgb(255,255,255)"
? hsl十進制- "hsl(120,50%,20%)"
? rgb十六進制- "#ffeeaa"
? rgb簡寫十六進制- "#fea"
? 名稱 - "red", "white", "blue"
輸出的顏色將以取值范圍為[0,360]的色度和取值范圍為[0,1]的亮度、飽和度作為屬性值存儲。紅、綠和藍的整數通道形式存儲(整數范圍:[0,255])。顏色通道可以通過顏色對象的屬性h, s和l訪問到。可支持的列表named colors可以通過CSS指定。如果是RGB空間的顏色,可以轉換成在HSL空間相同類型的值,和rgb.hsl類似。
# hsl.brighter([k])
返回顏色的一個高亮副本。每個顏色通道值將乘以0.7 ^ -k. 如果參數 k 被忽略,將使用默認值1。通道值上限值255,下限值30.
# hsl.darker([k])
返回低顏色的一個亮度副本。每個顏色通道值將乘以0.7 ^ k. 如果參數 k 被忽略,將使用默認值1。
# hsl.rgb()
返回一個RGB空間的等值顏色對象。請查閱d3.rgb了解更多關于返回顏色對象的信息. 文檔CSS3 Color Module Level 3中有關于HSL到RGB 轉換的信息。該函數是上述轉化的逆操作。
# hsl.toString()
將顏色轉換成一個十六進制數的RGB顏色字符串,如 such as "#f7eaba"。
HCL
# d3.hcl(h, c, l)
…
# d3.hcl(color)
…
# hcl.brighter([k])
…
# hcl.darker([k])
…
# hcl.rgb()
…
# hcl.toString()
將顏色轉換成一個十六進制數的RGB顏色字符串,如 such as "#f7eaba"。
L*a*b*
# d3.lab(l, a, b)
…
# d3.lab(color)
…
# lab.brighter([k])
…
# lab.darker([k])
…
# lab.rgb()
…
# lab.toString()
將這個L*a*b*顏色轉換成一個十六進制數的RGB顏色字符串,如 such as "#f7eaba"。
Color
提供d3.color的基礎類型,支持你擴展D3增加行的顏色空間。這個類型能夠自動地使用 d3.interpolate(通過instanceof d3.color識別)插入RGB。
# d3.color()
顏色類型的基礎構造函數。
# color.rgb()
返回這個顏色的RGB值,必須被所有的顏色空間實現。
# color.toString()
轉換為代表這個顏色的RGB十六進制字符串,例如"#f7eaba"。
邊城譯2014-4-6
咕嚕校20141122