D3.js中Radial Cluster Dendrogram详解

来源：互联网发布：网络低俗文化编辑：程序博客网时间：2024/06/06 17:53

Radial Cluster Dendrogram

上一篇聊了Cluster Dendrogram，这一篇对照着聊一聊Radial Cluster Dendrogram. “radial”意思为放射状的，因此，估计你也能猜到Radial Cluster Dendrogram长啥样了。
Radial形状的Cluster Dendrogram靓照闪亮登场[来自官网]：

接下来，解释这张图是怎么实现的，Radial Cluster Dendrogram和上一篇讲的Cluster Dendrogram所用的数据文件是一样的。

index.html详解——源码

<!DOCTYPE html><meta charset="utf-8"><style>.node circle {  fill: #999;}.node text {  font: 10px sans-serif;}.node--internal circle {  fill: #555;}.node--internal text {  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;}.link {  fill: none;  stroke: #555;  stroke-opacity: 0.4;  stroke-width: 1.5px;}</style><svg width="960" height="950"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>// 定义一个svg画布var svg = d3.select("svg"),    // 获取svg画布的宽度    width = +svg.attr("width"),    // 获取svg画布的高度    height = +svg.attr("height"),    // 在画布上添加g元素，并将放置到translate动作所指示的位置    g = svg.append("g").attr("transform", "translate(" + (width / 2 - 15) + "," + (height / 2 + 25) + ")");// d3.stratify()函数用来将数据转换为tree布局所需要的格式，例如为数据计算并添加parent,depth,children等信息var stratify = d3.stratify()     // 此处定义节点的parentId的计算方式为：从节点id字段中截取最后一个“.”之前的字符串    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });// 此处定义布局函数tree().var tree = d3.cluster()     // 设置布局的大小    .size([360, 390])    // cluster.separation函数用来计算两个节点之间的间隔    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });// 处理数据d3.csv("flare.csv", function(error, data) {  if (error) throw error;  // 首先，调用stratify(data)  // 返回的是一个树结构的数据格式，其中的节点具有：children、data、height、id、depth、parent字段，  // 这些字段都是stratify()函数自动计算并且添加的  // 其次，调用 tree()函数，进行tree()布局，此处会自动布局，为数据添加可视化所需要的位置信息  // 所以，调用tree()之后，root数据中的节点除了children、data、height、id、depth、  // parent之外，又添加了x,y两个字段信息，表示节点的位置信息  // sort是用来对节点按照height属性或者是id的字典顺序来进行排序  var root = tree(stratify(data)      .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }));  // 绘制节点之间的连接线  var link = g.selectAll(".link")     // d3中descentdants函数用来返回某个结构中所有的节点数组，例如此处root是树形结构的数据，     // 那么调用root.descentdants()之后返回的是root结构中所有节点的一个数组；     // js中的slice()函数从已有的数组中返回指定的元素；     // 因此 root.descendants().slice(1)函数返回root中除了depth 为0的节点之外的所有节点     // 组成的数组,这里要去掉depth为0的节点，是因为，根节点只有和其子节点之间的连线，没有哪个     // 节点指向根节点并和其之间有连线了    .data(root.descendants().slice(1))    .enter().append("path")      .attr("class", "link")      .attr("d", function(d) {        // 此处通过连线的子节点和父节点的坐标来计算path元素的属性“d”的值，以此来绘制节点之间的连线        // 此处和上一篇中Cluster Dendrogram不同的是，path的路径数据是通过project()函数来映射        // 计算节点的坐标位置        return "M" + project(d.x, d.y)            + "C" + project(d.x, (d.y + d.parent.y) / 2)            + " " + project(d.parent.x, (d.y + d.parent.y) / 2)            + " " + project(d.parent.x, d.parent.y);      });  // 绘制节点  var node = g.selectAll(".node")    .data(root.descendants())    .enter().append("g")      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })      // 根据布局算出的每个节点的坐标位置来摆放节点，此处位置的计算与上一篇Cluster Dendrogram不同，      // 是通过project()函数来映射计算节点的坐标位置      .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });  // 每个节点用圆来绘制  node.append("circle")      .attr("r", 2.5);  // 为节点绑定文字描述  node.append("text")      .attr("dy", ".31em")      // 此处与上一篇的Cluster Dendrogram不同，通过角度180作为界线来判断文字的位置      .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })      .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })      // 上一篇的Cluster Dendrogram由于是普通的集群结构，没有文字旋转操作，      // 而由于Radial Cluster Dendrogram呈现出放射状，所以，文字需要一定的旋转      .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });});// project函数用来通过节点的坐标来映射，计算angle,radius，最终返回映射后的坐标function project(x, y) {  var angle = (x - 90) / 180 * Math.PI, radius = y;  return [radius * Math.cos(angle), radius * Math.sin(angle)];}</script>

至此，Radial Cluster Dendrogram图形的实现过程解释完毕。Radial Cluster Dendrogram的实现和上一节的Cluster Dendrogram对照着看，比较好理解两者的区别，Radial Cluster Dendrogram就像把 Cluster Dendrogram 弯曲折成一个圆环了。这个动作的实现用非常小的一个改动就实现了，那就是本篇中强大的project()函数。

阅读全文

0 0