SVG D3.js - 定義色彩 - 應用篇 ( colors )

上一篇我們探討了 d3.js 裏頭色彩的定義與 API 操作方式，其實對於色彩，d3.js 還有不少應用的方法，也因此在官網所介紹的範例，才會如此的色彩豐富生動多姿，因此，這篇將繼續介紹色彩的應用，主要是利用之前介紹過的 scale 來變化色彩，很神奇吧！scale 要怎麼定義色彩？就讓我們繼續看下去吧~

Linear

介紹之前，來回顧一下 scale 的用法，之前介紹過兩種用法，分別是 linear 和 ordinal ( 當然還有其他的，不過最常用的就這兩種 )，而 d3.js 的色彩同樣也可以使用這兩種 API 來進行定義，首先來看看 linear 該如何使用。

一開始先在 HTML 放入十個 div

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
<div id="div7">7</div>
<div id="div8">8</div>
<div id="div9">9</div>
<div id="div10">10</div>

接著按照 scale.linear() 的方式寫 js，比較特別的是，range 裡放入的是顏色的色碼 ( 或顏色名稱 )，如此一來，就會在 domain 裏頭，讓顏色進行如漸層般的運算，接著只要填入對應的數字，就可以得到漸層內的顏色，範例的程式碼比較冗長，因為完全沒有使用 CSS，連同 CSS 都一併由 d3.js 解決，這種方法其實不好，最好還是 CSS 與 js 各司其職，但這只是為了範例可以更清楚的表現才使用喔！( 範例：svg-d3-10-colors-2-demo1.html )

var d = d3.selectAll('div'),
    div1 = d3.select('#div1'),
    div2 = d3.select('#div2'),
    div3 = d3.select('#div3'),
    div4 = d3.select('#div4'),
    div5 = d3.select('#div5'),
    div6 = d3.select('#div6'),
    div7 = d3.select('#div7'),
    div8 = d3.select('#div8'),
    div9 = d3.select('#div9'),
    div10 = d3.select('#div10');

d.style({
  'width':'50px',
  'height':'50px',
  'display':'inline-block',
  'line-height':'50px',
  'color':'#fff',
  'text-align':'center',
  'margin':'2px'
});

var color = d3.scale
              .linear()
              .domain([1,10])
              .range(['#f00', '#00f']);

div1.style({background:color(1)});  //注意這裡的寫法
div2.style({background:color(2)});
div3.style({background:color(3)});
div4.style({background:color(4)});
div5.style({background:color(5)});
div6.style({background:color(6)});
div7.style({background:color(7)});
div8.style({background:color(8)});
div9.style({background:color(9)});
div10.style({background:color(10)});

category

用這種方法，我們就可以定義出一個範圍內的顏色變化，也更能將死板板的數據，對應到各自代表的顏色，例如汙染越高的地方越黑、音量越大越紅、溫度越冷越藍、雨量越多越紫...等之類的圖表，然而除了 scale.linear 這種方法之外，也可以使用之前介紹過的 ordinal，定義出類似陣列概念的顏色陣列，而且其實我們不用自己定義，d3.js 已經幫我們定義好了幾種，分別是以下幾種：

• d3.scale.category10()
• d3.scale.category20()
• d3.scale.category20b()
• d3.scale.category20c()

當中所包含的色彩序列如下：

• d3.scale.category10()：

  1f77b4
  ff7f0e
  2ca02c
  d62728
  9467bd
  8c564b
  e377c2
  7f7f7f
  bcbd22
  17becf

• d3.scale.category20()：

  1f77b4
  aec7e8
  ff7f0e
  ffbb78
  2ca02c
  98df8a
  d62728
  ff9896
  9467bd
  c5b0d5
  1f77b4
  aec7e8
  ff7f0e
  ffbb78
  2ca02c
  98df8a
  d62728
  ff9896
  9467bd
  c5b0d5

• d3.scale.category20b()：

  393b79
  5254a3
  6b6ecf
  9c9ede
  637939
  8ca252
  b5cf6b
  cedb9c
  8c6d31
  bd9e39
  e7ba52
  e7cb94
  843c39
  ad494a
  d6616b
  e7969c
  7b4173
  a55194
  ce6dbd
  de9ed6

• d3.scale.category20b()：

  3182bd
  6baed6
  9ecae1
  c6dbef
  e6550d
  fd8d3c
  fdae6b
  fdd0a2
  31a354
  74c476
  a1d99b
  c7e9c0
  756bb1
  9e9ac8
  bcbddc
  dadaeb
  636363
  969696
  bdbdbd
  d9d9d9

當你滑鼠滾輪滾到這邊，一定滿肚子怨念，幹嘛列出這麼多顏色，坦白說我寫完上面這一大串也是滿肚子大便，但為了忠實呈現 d3.js 官網的東西，還是必須要列出這些顏色，這些顏色就是 d3.js 幫我們定義的顏色序列，我們可以像下面範例這樣使用，先定義 color，然後內容的數字分別就是對應到色彩序列的顏色編號。( 範例：svg-d3-10-colors-2-demo2.html )

var d = d3.selectAll('div'),
    div1 = d3.select('#div1'),
    div2 = d3.select('#div2'),
    div3 = d3.select('#div3'),
    div4 = d3.select('#div4'),
    div5 = d3.select('#div5');

d.style({
  'width':'50px',
  'height':'50px',
  'display':'inline-block',
  'line-height':'50px',
  'color':'#fff',
  'text-align':'center',
  'margin':'2px'
});

var color = d3.scale.category20b();

div1.style({
  background:color(1)
});
div2.style({
  background:color(2)
});
div3.style({
  background:color(3)
});
div4.style({
  background:color(4)
});
div5.style({
  background:color(5)
});

var color = d3.scale.category20c();

div1.style({
  background:color(1)
});
div2.style({
  background:color(2)
});
div3.style({
  background:color(3)
});
div4.style({
  background:color(4)
});
div5.style({
  background:color(5)
});

小結

以上，就是在 d3.js 裏頭色彩的另外一種應用作法，相信理解了之後，看待一大串的數字，可能都會不由自主地把這些數據給上顏色囉！如果對於色碼與顏色名稱有興趣的，也可以參考：Recognized color keyword names