D3.js中Radial Cluster Dendrogram详解
2017-12-09 16:13
225 查看
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()函数。
相关文章推荐
- 一个使用JS原型的图片滚动类
- JS实现简单悬浮框
- vue.js使用(一):vue-cli的安装
- echart.js 数据交互实例
- 如何动态在文档中加入<script></script>写入大段js
- CSS和JS标签style属性对照表
- JS中正规表达式相关函数详解
- js 判断checkbox是否选中
- 通过js获取div的background-image属性
- js 右侧浮动层效果实现代码(跟随滚动)
- 使用Selenium和PhantomJS解析带JS的网页
- js "include"其他js / css 文件
- JS之onkeypress,onkeydown,onkeyup区别
- 1800+的D3.js示例
- js之工具函数
- js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)
- js代码执行C#代码
- php和js中json的编码和解码
- iOS 开发中OC 与 JS的交互