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

查看在线演示

相关资源：[知识图谱实战篇] 七.HTML D3实现关系图谱搜索功能（源码）