d3生成的树状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形图(集群图)</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg{
display: block;
width: 1000px;
height: 800px;
margin: 100px auto;
}
path.link{
stroke: #333;
stroke-width: 1.5px;
fill:transparent;
}
.node circle{
fill:#fff;
stroke:steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<!--数据一共3级-->
<svg></svg>
</body>
</html>
<script> var tree = d3.layout.tree()
.size([600, 400])//设定尺寸,即转换后的各个节点的坐标在哪一个范围内;
.separation(function (a, b) {//设置节点之间的间隔;
return (a.parent == b.parent ? 1 : 2)
});
// 转换数据
d3.json('tree.json',function (error,root) {//root是读入的数据;
var nodes = tree.nodes(root);
var links = tree.links(nodes);
console.log(nodes)//nodes中有各个节点的子节点(children),深度(depth),名称(name).位置(x,y)信息;其中name是json文件中的属性
console.log(links)//links中有连线两端(source,target)的节点信息;
// 绘制
// d3.svg.diagonal()是一个对角线生成器,只要输入两个顶点坐标,即可生成一条贝塞尔曲线
// 创建一个对角线生成器
var diagonal = d3.svg.diagonal()
.projection(function(d){return [d.y,d.x]})//projection()是一个点变换器,默认是【d.x,d.y】,即保持原坐标不变,如果写成 [ d.y , d.x ] ,即是说对任意输入的顶点,都交换 x 和 y 坐标。
var svg = d3.select('svg')
.append('g')//不加这个g的时候,中国两个字出不来;
.attr("transform", "translate(140,0)");
// 绘制连线方法
var link = svg.selectAll('.link')
.data(links)
.enter()
.append('path')
.attr('class','link')
.attr('d',diagonal)
var node = svg.selectAll('.node')
.data(nodes)
.enter()
.append('g')
.attr('class','node')
.attr('transform',function (d) {
return "translate(" + d.y + "," + d.x + ")";
})
node.append('circle')
.attr('r',4.5)
node.append('text')
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
}) </script>
d3生成的树状图的更多相关文章
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- D3树状图给指定特性的边特别显示颜色
D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- D3树状图异步按需加载数据
D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
- d3.js(v5.7)树状图
一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
- Android一个炫酷的树状图组织架构图开源控件实现过程
Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...
- 使用ECharts绘制网址径向树状图
an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...
- SqlServer-无限递归树状图结构设计和查询
在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
随机推荐
- 项目部署相关命令(pm2)
普通方式启动后台服务: nohup npm start & 关闭服务,需要找到进程号: lsof -i :3000 kill -9 进程号 通过pm2启动项目,可实现关闭自启动: 安装pm2: ...
- SpringBoot集成阿里巴巴Druid监控
druid是阿里巴巴开源的数据库连接池,提供了优秀的对数据库操作的监控功能,本文要讲解一下springboot项目怎么集成druid. 本文在基于jpa的项目下开发,首先在pom文件中额外加入drui ...
- VMware5.5-虚拟交换机
虚拟交换机 即为[VM(ESXI内部.ESXI外部.ESXI之间等)]的各功能.提供的网桥 虚拟机选项负责虚机间的通讯 Vmkernel选项负责主机间的通讯 标准交换机 添加拓扑中vmotion的虚拟 ...
- 纯几何题 --- UVA - 11646 Athletics Track
这一题题目有点坑,注意这句话: 这代表了其圆心就是矩形的中心! 然后就可以推公式: 可知: x = 200/(a+2atan(b/c)*r); r = sqrt(a*a + b*b); 所以有AC代码 ...
- 英语口语练习系列-C25-冒险-课堂用语-葬我
词汇-冒险 adventure noun [ C or U ] UK /ədˈven.tʃər/ US /ədˈven.tʃɚ/ an unusual, exciting, and possibly ...
- How to show color in CSS
转至:https://blog.csdn.net/CallMeQiuqiuqiu/article/details/54743459 http://www.w3school.com.cn/cssref/ ...
- c++检查内存泄漏
使用_CrtDumpMemoryLeaks()函数检查内存泄漏 #include <cstdio> #include <cstdlib> #include <crtdbg ...
- [P2850][USACO06DEC]虫洞Wormholes (最短路)
死活调不出来 后来是发现这题建边的原因…… 吐血.jpg 所谓的虫洞传说也就是负边了 然后这里打的spfa和原来的不一样 感觉hzwer大佬的spfa好强啊…… 也更易写一点 贴代码 #include ...
- js 基本包装类型 String
为了操作基本类型值,ECMAScript提供了三个特殊的引用类型: Boolean , Number , String 举例: var s1 = "some text"; var ...
- Java中Date, Calendar, SimpleDateFormat的相互转换
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...