D3.js中Radial Cluster Dendrogram详解

最新推荐文章于 2022-08-13 12:25:39 发布

wan353694124

最新推荐文章于 2022-08-13 12:25:39 发布

阅读量2.3k

点赞数 1

分类专栏： d3 文章标签： Radial Cluster Dendrogram d3 d3.js

本文链接：https://blog.csdn.net/wan353694124/article/details/78758241

版权

d3 专栏收录该内容

16 篇文章 4 订阅

订阅专栏

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()函数。

wan353694124

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js中Radial Cluster Dendrogram详解

Radial Cluster Dendrogram昨天聊了Cluster Dendrogram，今天对照着聊一聊Radial Cluster Dendrogram. “radial”意思为放射状的，因此，估计你也能猜到Radial Cluster Dendrogram长啥样了。 Radial形状的Cluster Dendrogram靓照闪亮登场[来自官网]：接下来，解释这张图是怎么实
复制链接

扫一扫