d3.layout.treemap()

矩陣圖(Treemap)的API說明

• treemap.children – 取得或設定孩子訪問器。
• treemap.links – 計算樹節點中的父子連結。
• treemap.mode – 改變佈局的演算法。
• treemap.nodes – 計算矩形樹佈局並返回節點陣列。
• treemap.padding – 指定父子之間的間距。
• treemap.round – 啟用或者禁用四捨五入畫素值。
• treemap.size – 指定佈局的尺寸。
• treemap.sort – 控制兄弟節點的遍歷順序。
• treemap.sticky – 讓佈局對穩定的更新是粘滯的（sticky）。
• treemap.value – 取得或設定用來指定矩形樹中矩形單元尺寸的值訪問器。
• treemap – treemap.nodes的別名。

1、資料

var dataset = {
  "name": "中國",
  "children":
      [
        {
          "name": "浙江",
          "children":
              [
                {"name":"杭州", "gdp":8343},
                {"name":"寧波", "gdp":7128},
                {"name":"溫州", "gdp":4003},
                {"name":"紹興", "gdp":3620},
                {"name":"湖州", "gdp":1803},
                {"name":"嘉興", "gdp":3147},
                {"name":"金華", "gdp":2958},
                {"name":"衢州", "gdp":1056},
                {"name":"舟山", "gdp":1021},
                {"name":"台州", "gdp":3153},
                {"name":"麗水", "gdp":983}
              ]
        },
        {
          "name": "廣東",
          "children":
              [
                {"name":"杭州", "gdp":8343},
                {"name":"寧波", "gdp":7128},
                {"name":"溫州", "gdp":4003},
                {"name":"紹興", "gdp":3620},
                {"name":"湖州", "gdp":1803},
                {"name":"嘉興", "gdp":3147},
                {"name":"金華", "gdp":2958},
                {"name":"衢州", "gdp":1056},
                {"name":"舟山", "gdp":1021},
                {"name":"台州", "gdp":3153},
                {"name":"麗水", "gdp":983}
              ]
        },
        {
          "name": "福建",
          "children":
              [
                {"name":"杭州", "gdp":8343},
                {"name":"寧波", "gdp":7128},
                {"name":"溫州", "gdp":4003},
                {"name":"紹興", "gdp":3620},
                {"name":"湖州", "gdp":1803},
                {"name":"嘉興", "gdp":3147},
                {"name":"金華", "gdp":2958},
                {"name":"衢州", "gdp":1056},
                {"name":"舟山", "gdp":1021},
                {"name":"台州", "gdp":3153},
                {"name":"麗水", "gdp":983}
              ]
        }
      ]
}

矩陣佈局用的還是標準的層級關係資料結構，name、children欄位為必須，資料值欄位可自定或用預設的value，本例中用的是gdp，所以在接下來的資料轉換中需要用value方法指定資料值欄位。

2、資料轉換

var width = 800;
var height = 500;
var treemap = d3.layout.treemap()
    .size([width, height])
    .value(function(d) {
        return d.gdp;
    });
var nodes = treemap.nodes(dataset);
var links = treemap.links(nodes);

轉換資料後，節點陣列的輸出結果如圖所示。

其中，節點物件的屬性包括：

parent：父節點
children：子節點
depth：節點的深度
value：節點的value值，由value訪問器決定
x：節點的x座標
y：節點的y座標
dx：x方向的寬度
dy：y方向的寬度

本例中將不會用到liks資料物件；

3、繪製圖形

生成SVG容器

var svg = d3.select(`body`).append(`svg`)
    .attr(`width`,width)
    .attr(`height`,height)

生成顏色比例尺

var color = d3.scale.category10();

為每種型別資料建立容器

var groups = svg.selectAll("g")
    .data(nodes.filter(function(d) {
        return !d.children;
    }))
    .enter()
    .append("g");

為每種型別資料建立矩形圖

var rects = groups.append("rect")
    .attr("class", "nodeRect")
    .attr("x", function(d) {
        return d.x;
    })
    .attr("y", function(d) {
        return d.y;
    })
    .attr("width", function(d) {
        return d.dx;
    })
    .attr("height", function(d) {
        return d.dy;
    })
    .style("fill", function(d, i) {
        return color(d.parent.name);
    });

生成文字

var texts = groups.append("text")
    .attr("class", "nodeName")
    .attr("x", function(d) {
        return d.x;
    })
    .attr("y", function(d) {
        return d.y;
    })
    .attr("dx", "0.5em")
    .attr("dy", "1.5em")
    .text(function(d) {
        return d.name + " " + d.gdp;
    });

檢視線上演示