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

查看在线演示