||

D3js Layout 详解Cluster —- 集群图

作者daliane

集群图（ Cluster ）通常用于表示包含与被包含关系。

现在我们给出数据，并将其可视化。数据的内容为：中国里包含的部分省份，省份里包含的部分城市。我们讲数据文件写在一个 JSON 文件中，再用 D3 来读取。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于它的语法规则，请各位自行查询百度百科等。数据如下：

{
“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”:”哈密”}
]
}
]
}

 

 

其实我们光从数据上看，也很容易看出它们是用来表示什么的，是什么关系。好，现在开始进行可视化。同样的，先要用 Layout 转换数据。
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
var cluster = d3.layout.cluster()
.size([height, width – 200]);
上面代码定义了一个 cluster 的数据转换函数。.size 函数用于设定转换后的尺寸。接下来要用这个函数来转换数据：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
d3.json(“city.json”, function(error, root) {

var nodes = cluster.nodes(root);
var links = cluster.links(nodes);

console.log(nodes);
console.log(links);

}

 

有了转换后的数据，就可以绘制了。其实 D3 已经基本上为我们准备好了绘制的函数，我们要学习的仅仅是查询并使用它们。

绘制线条，我们可以使用：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
这是用于绘制对掉线的函数， .projection 用于设定它的投影。绘制的时候，我们这样使用它：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
var link = svg.selectAll(“.link”)
.data(links)
.enter()
.append(“path”)
.attr(“class”, “link”)
.attr(“d”, diagonal);
这样就绘制了所有节点之间的连线。接下来我们再绘制节点。节点还是使用 svg 中的 circle 来绘制，这里就不复述了，前面已经讲过了，您也可以自己查看源代码。结果图为：

 

2015-02-11_113409

<html>
<head>
<meta charset=”utf-8″>
<title>Cluster</title>
</head>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<body>
<script src=”./js/d3.min.js” charset=”utf-8″></script>
<script>
var width = 500,
height = 500;

//定义了一个 cluster（集群） 的数据转换函数。
var cluster = d3.layout.cluster()
.size([height, width – 200]);

////定义布局方向
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

//添加画布
var svg = d3.select(“body”).append(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.append(“g”)
//旋转
.attr(“transform”, “translate(40,0)”);

// d3.json 用于读取 JSON 文件。要注意，d3.json 只能用于网络读取，所以您必须搭建一个服务器来使用它

d3.json(“city.json”, function(error, root) {
var nodes = cluster.nodes(root);
var links = cluster.links(nodes);
//为关系集合设置贝塞尔曲线连接
var link = svg.selectAll(“.link”)
.data(links)
.enter()
.append(“path”)
.attr(“class”, “link”)
.attr(“d”, diagonal);
//根据node集合生成节点
var node = svg.selectAll(“.node”)
.data(nodes)
.enter()
.append(“g”)
.attr(“class”, “node”)
.attr(“transform”, function(d) { return “translate(” + d.y + “,” + d.x + “)”; })
//为节点添加圆形标记
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; });
});
</script>
</body>
</html>

类似文章