【D3.js数据可视化系列教程】（二十七）--径向树

最新推荐文章于 2021-05-23 14:16:23 发布
最新推荐文章于 2021-05-23 14:16:23 发布
阅读量1.2w 收藏 11
点赞数 4
分类专栏： 数据可视化 D3数据可视化系列教程 文章标签： d3 d3.js d3js 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxuzhang/article/details/14134663
版权

径向树也就是环状的树

  1. 效果

  2. 技术分解

  2.1 定义树布局

指定布局大小和节点邻距

【司机提示】 树布局就是一个函数，用来对原始的层次状数据进行加工处理，而这个加工主要就是生成节点的坐标深度等数据。由这些数据结合对角线，圆等就可以绘制径向树了。

var tree = d3.layout.tree()
    .size([360, 360])// 角度360度，半径360px
    .separation(function(a, b) { 
    	return (a.parent == b.parent ? 1 : 2) / a.depth; });// 父节点相同的节点邻距相等，不同的稍宽一点用来区分开
    });

  2.2 定义径向对角线生成器

【司机提示】 径向对角线生成器也是一个函数，主要用来生成用以绘制连线数据。

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { 
    	return [d.y, d.x / 180 * Math.PI];// 半径d.y和角度d.x / 180 * Math.PI（转换成弧度制）
    });

  2.3 加载json数据

d3.json("tree.json", function(error, root) {
  var nodes = tree.nodes(root),//返回值是一个数组，它代表​​所有节点计算的位置。每个节点上填充一些属性：
      links = tree.links(nodes);//返回节点数组的连接数组
  //...
});

  2.4 为连线添加路径数据

var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", diagonal);

  2.5 节点转换位置

transform是变换，本例中用于平移

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  2.6 节点添加圆圈

node.append("circle")
  .attr("r", 4.5);

  2.7 节点添加文字

node.append("text")
  .attr("dy", ".31em")
  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })//小于180度的文字放在前面，否则放在后面
  .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
  .text(function(d) { return d.name; });

  3. JSON文件

很简单就是{}表示对象。[]表示数组。可以无限嵌套，可以无限重复

{
 "name": "AAA",
 "children": 
 [
  	  { "name": "BBB", 
  	  	"children": 
  	    [
  	      	{"name": "CCC", 
  	      	"children": 
  	      	[
  	          		{"name": "DDD", 
  	          		 "children":
                     [
                            {"name": "EEE", "size": 73},
                          	{"name": "EEE", "size": 39},
                          	{"name": "EEE", "size": 67},
                          	{"name": "EEE", "size": 73},
                          	{"name": "EEE", "size": 39},
                          	{"name": "EEE", "size": 67},
                          	{"name": "EEE", "size": 73},
                          	{"name": "EEE", "size": 39},
                          	{"name": "EEE", "size": 67},
                          	{"name": "EEE", "size": 73},
                          	{"name": "EEE", "size": 39},
                          	{"name": "EEE", "size": 67},
                          	{"name": "EEE", "size": 73},
                          	{"name": "EEE", "size": 39},
                          	{"name": "EEE", "size": 67},
                          	{"name": "EEE", "size": 73}
                     ]},
                  	{"name": "DDD", "size": 73},
                  	{"name": "DDD", "size": 39},
                  	{"name": "DDD", "size": 67},
                  	{"name": "DDD", "size": 73},
                  	{"name": "DDD", "size": 39},
                  	{"name": "DDD", "size": 67},
                  	{"name": "DDD", "size": 73},
                  	{"name": "DDD", "size": 39},
                  	{"name": "DDD", "size": 67},
                  	{"name": "DDD", "size": 73},
                  	{"name": "DDD", "size": 39},
                  	{"name": "DDD", "size": 67},
                  	{"name": "DDD", "size": 73},
                  	{"name": "DDD", "size": 39},
                  	{"name": "DDD", "size": 67},
                  	{"name": "DDD", "size": 73}
  	      	]},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73},
          	{"name": "CCC", "size": 39},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73},
          	{"name": "CCC", "size": 39},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73},
          	{"name": "CCC", "size": 39},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73},
          	{"name": "CCC", "size": 39},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73},
          	{"name": "CCC", "size": 39},
          	{"name": "CCC", "size": 67},
          	{"name": "CCC", "size": 73}
  	  ]
      },
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73},
      {"name": "BBB", "size": 39},
      {"name": "BBB", "size": 67},
      {"name": "BBB", "size": 73}
 ]
}

  4. 完整代码

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>testD3-24-Reingold–Tilford Tree.html</title>
        <script type="text/javascript" src="d3.js"></script>
    <style>

.node circle {
  fill:yellow ;
  stroke: red;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif ;
}

.link {
  fill: green;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
</head>
<body>
<script type="text/javascript">
var diameter = 960;//直径
//(1)树指定径向布局大小和节点邻距
var tree = d3.layout.tree()
    .size([360,  360])// 角度360度，半径360px
    .separation(function(a, b) { 
    	return (a.parent == b.parent ? 1 : 2) / a.depth;// 父节点相同的节点邻距相等，不同的稍宽一点用来区分开
    });

var diagonal = d3.svg.diagonal.radial()//(2)指定为径向布局
    .projection(function(d) { 
    	return [d.y, d.x / 180 * Math.PI];// 半径d.y和角度d.x / 180 * Math.PI（转换成弧度制） 
    });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter - 150)
  	.append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
//(3)加载json
d3.json("flare.json", function(error, root) {
  var nodes = tree.nodes(root),//返回值是一个数组，每个节点上填充一些计算后的属性，例如深度，坐标等。
      links = tree.links(nodes);//返回节点数组的连接数组
  //(4)为链接添加路径
  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);
  //(5)节点转换位置
  var node = svg.selectAll(".node")
      .data(nodes)
   	  .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
  //(6)节点添加圆圈
  node.append("circle")
      .attr("r", 4.5);

  //(7)节点添加文字
  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })//小于180度的文字放在前面，否则放在后面
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });
});

司机大傻
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
GraphVisualisation:使用Fruchterman-Reingold算法绘制图形并通过C ++中的Barnes Hut算法进行优化
04-14
通过力导向放置的图形绘制 输入 在.txt文件中 格式： To have colour coding: 1 1 2 1 3 1 4 2 5 3 // node group % 1--2,10 // where 1 & 2 are nodes & there is an edge joining 1 & 2 & weight = 10 (weight is optional) 1--2 // where 1 & 2 are nodes & there is an edge joining 1 & 2 (without weight) - example input and output can be found under input & output folder above 安装 git clone https://github.com/lsscecilia/GraphVisualisa
D3.js绘制竖向组织架构图
害怕的博客
07-25 1万+
d3新手上路，记个笔记(*^_^*) 先上效果图： 主要参考：https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-pedigree-examples d3版本为3.x 主要代码如下： const width = 1200; const height = 500; ...
【D3.js - v5.x】（6）绘制树状图 | 层级布局 | 附完整代码
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
04-28 5517
树状图 在d3 中，绘制树状图，要用到层级布局这个概念： d3.hierarchy(data[, children]) 根据指定的层次结构数据构造一个根节点。指定的数据 data 必须为一个表示根节点的对象。比如: { "name": "Eve", "children": [ { "name": "Cain" }, { "name": "S.........
D3.js绘制树形图
xinxiaoyong的博客
06-07 6820
1、什么是D3： data-driven-document,翻译为数据驱动的文档，是一种由数据来决定绘图流程的程序设计模型。简单说，D3是一个JavaScript的函数库，用来做数据可视化(将数据的各种属性和变量以图形图表的形式呈现出来)。 2、D3的优点： 前端可视化库：Hightcharts(付费)、Echarts、Chart等可以看做一类(是被封装好的库)，使开发者很容易的就能制作图表(只需修改一下数据即可)，但是能够给与开发者设计和控制的空间太少(个人...
D3.js数据可视化实战手册.pdf
08-09
D3.js数据可视化实战手册.pdf
d3.js第七次人口普查可视化分析（含数据和源代码）
06-28
“d3.js第七次人口普查可视化分析（含数据和源代码）”这一标题揭示了本文档的核心内容。它表明我们将探讨如何利用d3.js库对第七次全国人口普查的数据进行可视化的深入分析。d3.js是Data-Driven Documents的简称，是...
earthquake-data-visualisation:特温特大学数据可视化课程D3.JS数据可视化
06-03
Rick van Gemert (s1474235) 和 Bouke Regnerus (s1475924) 的创意技术数据可视化课程的数据可视化。 Bouke 是一名智能技术学生，Rick 是一名新媒体学生。 在 D3.js ( ) 中创建。 在我们的可视化中，我们展示了自 ...
D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）
03-26
D3.js，全称Data-Driven Documents，是由Mike Bostock开发的一款强大的JavaScript库，用于创建数据驱动的文档。这个库允许开发者通过HTML、SVG和CSS来操作数据，实现复杂的数据可视化。对于想要深入学习D3.js的人来...
Data.Visualization.with.D3.js.Cookbook-D3.js数据可视化实战手册 中文高清完整版pdf 带详细书签
10-21
文件已上传到百度网盘，附件中是下载地址... Data.Visualization.with.D3.js.Cookbook-D3.js数据可视化实战手册 [加]nick qi zhu 著(著) | 杨锐 刘夏 王超 张沙沙(译) | 人民邮电出版社 | 9787115360960 | 2014-09- 01
D3.js树图tree 组织机构分布图(基于vue)
qq_38192105的博客
10-26 6979
@[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景 前段时间接到一个需求，仿照企业查查->企业族谱 使用d3画出企业关系树图。这也是本人第一次接触d3.js，总体来说就是对数据进行操作，具体可自行网上学习，还需要具有一定svg基础。 开发中遇到的主要问题就是对各节点位置的设置，因为根节点是左右进行扩散，那针对左右两部分的根就要根据根节点所占长度进行调整，具体实现可见代码： 还有一点需要说明下，d3.js的各版本并非全面向下兼容，之前网上找的一些案例，本地运行时一直报各种错误，排
D3.js中Treemap(矩形树图)源码详解
wan353694124的专栏
01-03 1万+
Treemap(矩形树图）聊一聊Treemap，即矩形树图，树形结构非常有意思的一种展现方式，外形规整而不失表达力。 矩形树状结构图（Treemap）是一种有效的实现层次结构可视化的图表结构，简称矩形树图或树图。在矩形树图中，各个小矩形的面积表示每个子节点的大小，矩形面积越大，表示子节点在父节点中的占比越大，整个矩形的面积之和表示整个父节点。通过矩形树图及其钻取情况，我们可以很清晰地知道数据的全
d3+jQuery横向树图，可展开
weixin_43085797的博客
04-17 2084
效果图 实现： <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gqct.css"> <title>d3+jQuery横向树图</title&gt...
d3.js v3版本实现-树状图
Java小白的博客
05-24 8566
参考的例子：http://bl.ocks.org/robschmuecker/7880033    一、为什么选择d3.js二、d3.js概述三：树状图实现1、创建svg2、在svg元素里面画一个g标签，用于存放树结构3、组织树结构，获取树结构原始数据，d3加工数据1.创建tree2.加工数据4、data方式绑定数据生成数据结构，创建整棵树5、创建树节点，设置样式并绑定事件问题：节点的text定位...
d3.js学习笔记-10(布局：树状图、集群图捆、捆图)
qq_40625543的博客
09-15 1773
d3.js学习笔记-09 目录d3.js学习笔记-091 树状图References 1 树状图 在区域内按规则布置节点，再用连线将节点连接起来，最终的图表形似一颗树杆 d3.layout.tree()：创建一个树状图布局 tree.size([width, height])：设定或获取尺寸，参数size是只有两个元素的数组，分别表示宽和高。 tree.nodeSize([nodeSize])：设定或获取各节点的大小，以数组的形式:[x,y] tree.value([value])：设定或获取值访问器，
d3.js树状图
m0_37656425的博客
11-02 3737
d3.js画树状图 我们在项目开发过程中，会遇到项目要求：可视化的树状图，1：满足收缩展开。2：点击跳转。 3：放大缩小，移动。 我 研究了一下echart.js中的树状图， 无法满足
d3.js 生成 svg tree 树形结构图
czy279470138的博客
03-12 9739
本文实例 demohttp://www.jq22.com/jquery-info21370 d3中文版 https://d3js.org.cn 官方API https://github.com/d3/d3/blob/master/API.md 官方APIv3https://github.com/d3/d3-3.x-api-reference/blob/master/API-R...
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开，可点击跳转，可带标签
朝阳39的博客
05-23 6484
d3 树——折叠/展开原理 1. 点击节点前的折叠/展开按钮（此处为红色圆圈）时， 若节点已展开(children有值)——将节点的children数据存入新属性childrenTemp后，将children设为null 若节点已折叠(children无值)——将节点的childrenTemp属性值赋值为children，并将childrenTemp设为null //绘制节点(节点前的圆圈) groups.append("circle") // 树的展开折叠 .on("click"...
D3.js学习笔记十五:D3.js树图(Tree)展开和折叠
热门推荐
小飞侠的博客
08-22 1万+
构图(d3.layout)——树图(Tree)的展开和折叠 树的基本操作就是展开和折叠，在D3里面，树的展开和折叠是通过设置树的子节点属性来实现的，tree.nodes(root)返回树的当前节点集合，通过操作这个集合，可以实现节点的动态变化。 children - the array of child nodes, or null for leaf nodes. x - the
D3.js数据可视化基础教程
教程适合那些需要在网页前端进行数据可视化开发，或是对D3.js感兴趣的读者。虽然最好有一定的JavaScript基础，但即使没有，也能通过自学和查阅资料来跟上教程。 教程内容分为多个章节，逐步引导读者深入D3的世界： ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值