【D3.js 学习总结】12、D3布局-集群图

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;
    });

查看在线演示