d3.layout.cluster()

叢集圖是一種用於表示包含與被包含關係的圖表。

叢集圖(Cluster)的API說明

• cluster.children – 取得或者設定子節點的訪問器函式。
• cluster.links – 技術樹節點之間的父子連線。
• cluster.nodeSize – 為每個節點指定固定的尺寸。
• cluster.nodes – 計算叢集佈局並返回節點陣列。
• cluster.separation – 取得或設定鄰接節點的分隔函式。
• cluster.size – 取得或設定佈局的尺寸。
• cluster.sort – 取得或設定兄弟節點的比較器函式。
• cluster – cluster.nodes的別名。

我們通過一個製作一個叢集圖來講解叢集佈局。

1. 資料

var dataset = {
    "name": "中國",
    "children": [{
            "name": "浙江",
            "children": [{"name": "杭州"}, {"name": "寧波"}, {"name": "溫州"}, {"name": "紹興"}]
        },

        {
            "name": "廣西",
            "children": [{"name": "桂林"}, {"name": "南寧"}, {"name": "柳州"}, {"name": "防城港"}]
        },

        {
            "name": "黑龍江",
            "children": [{"name": "哈爾濱"}, {"name": "齊齊哈爾"}, {"name": "牡丹江"}, {"name": "大慶"}]
        },

        {
            "name": "新疆",
            "children": [{"name": "烏魯木齊"}, {"name": "克拉瑪依"}, {"name": "吐魯番"}, {"name": "哈密"}]
        }
    ]
}

2. 資料轉換

var width = 1000,
    height = 500;

var cluster = d3.layout.cluster()
    .size([width, height - 100]);

var nodes = cluster.nodes(dataset); // 節點
var links = cluster.links(nodes); // 連線

size() 設定尺寸，即轉換後的各節點的座標在哪一個範圍內。

通過叢集佈局轉換資料後，資料被轉換成如下形式：

節點

連線

3. 繪製圖形

生成SVG容器

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,50)");

建立對角線SVG生成器

var diagonal = d3.svg.diagonal()

生成連線路徑

var link = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", diagonal);

生成圓形節點和文字

var node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", function(d) {
        return d.children ? -8 : 8;
    })
    .attr("dy", 3)
    .style("text-anchor", function(d) {
        return d.children ? "end" : "start";
    })
    .text(function(d) {
        return d.name;
    });

檢視線上演示