d3學習之（Data Visualization with d3.js Cookbook ）（第四章）-3

標籤：style   blog   http   io   color   ar   os   使用   java   

3.使用分類範圍尺

         在某些情況下，我們可能需要將我們的資料對應到一些分類的（順序的）值，比如[a,b,c]或者[# 1f77b4, # ff7f0e, #2ca02c]等，如何用D3來處理這類映射呢，本節將回答這個問題。

         老規矩還是先上代碼，開啟你的編輯器，輸入如下代碼：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Ordinal Scale</title>    <link rel="stylesheet" type="text/css" href="styles.css"/>    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script></head><body><div id="alphabet" class="clear">    <span>Ordinal Scale with Alphabet<br></span>    <span>Mapping [1..10] to ["a".."j"]<br></span></div><div id="category10" class="clear">    <span>Ordinal Color Scale Category 10<br></span>    <span>Mapping [1..10] to category 10 colors<br></span></div><div id="category20" class="clear">    <span>Ordinal Color Scale Category 20<br></span>    <span>Mapping [1..10] to category 20 colors<br></span></div><div id="category20b" class="clear">    <span>Ordinal Color Scale Category 20b<br></span>    <span>Mapping [1..10] to category 20b colors<br></span></div><div id="category20c" class="clear">    <span>Ordinal Color Scale Category 20c<br></span>    <span>Mapping [1..10] to category 20c colors<br></span></div><script type="text/javascript">    var max = 10, data = [];    for (var i = 0; i < max; ++i) data.push(i); // <-A        var alphabet = d3.scale.ordinal() // <-B        .domain(data)        .range(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]);            function render(data, scale, selector) { // <-C        d3.select(selector).selectAll("div.cell")                    .data(data)                .enter().append("div").classed("cell", true);        d3.select(selector).selectAll("div.cell")                    .data(data)                .exit().remove();        d3.select(selector).selectAll("div.cell")                    .data(data)                .style("display", "inline-block")                .style("background-color", function(d){  // <-D                    return scale(d).indexOf("#")>=0?scale(d):"white";                })                .text(function (d) { // <-E                    return scale(d);                });    }    render(data, alphabet, "#alphabet"); // <-F    render(data, d3.scale.category10(), "#category10");    render(data, d3.scale.category20(), "#category20");    render(data, d3.scale.category20b(), "#category20b");    render(data, d3.scale.category20c(), "#category20c"); // <-G</script></body></html>

           運行該代碼我們將看到的結果：

           這種類型的映射在資料視覺效果中非常常見，比如你可能想要將特定的資料點映射成對應的字串或者是RGB代碼，這樣你就可以應用到CSS樣式中。D3提供了專業的範圍尺函數來完成這項工作，下面我們就來詳細看看上面例子的代碼。

          在上面的例子中代碼A處定義了一個簡單的從0到9的數組。

    var max = 10, data = [];
    for (var i = 0; i < max; ++i) data.push(i); // <-A

          接著在B行調用d3.scale.ordinal()方法，建立了一個分類範圍尺，然後將其定義網域設定為我們在A處建立的數組即0-9的數字，將值網域設定成字母表中的a-j。當範圍尺定義後，我們可以調用scale函數來完成數字到字母的映射，比如調用alphabet（0）將得到a，alphabet（4）將得到e。等等。

           在C處，render函數被定義用來建立分別代表了數組中數位10個div元素到頁面中。每個div元素的背景色被設定成scale函數的返回值或者是白色如果返回值不是RGB代碼。

           function render(data, scale, selector) { // <-C
        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .enter().append("div").classed("cell", true);
        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .exit().remove();
        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .style("display", "inline-block")
                .style("background-color", function(d){  // <-D
                    return scale(d).indexOf("#")>=0?scale(d):"white";

          在E處，我們將scale函數的返回值賦值給每個div的text，將其現實在頁面中。

             .text(function (d) { // <-E
                    return scale(d);
                });

          現在所有的架構我們都搭建完畢，從F到G行，render函數被多次調用，並且使用不同的分類範圍尺來產生不同的輸出效果，在F行我們是使用字母表的映射，後面分別使用了D3內建的不同的色彩範圍尺，因為給不同元素分配不同的顏色是可視化常用到的，比如餅圖、表格等，所以d3為我們準備了很多不同的色彩範圍尺，比如本例中的幾個，你同樣也可以自己通過將分類範圍尺的值網域設定成你想要的顏色來定義自己的色彩範圍尺，比如：

          d3. scale.ordinal() .range([# 1f77b4, # ff7f0e, # 2ca02c]

              

d3學習之（Data Visualization with d3.js Cookbook ）（第四章）-3