D3.js中Radial Cluster Dendrogram详解
Posted wan353694124
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3.js中Radial Cluster Dendrogram详解相关的知识，希望对你有一定的参考价值。
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()函数。
以上是关于D3.js中Radial Cluster Dendrogram详解的主要内容，如果未能解决你的问题，请参考以下文章
D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形