<!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生成的树状图的更多相关文章

  1. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  2. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  3. D3.js系列——布局：弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  4. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  5. d3.js（v5.7）树状图

    一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...

  6. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  7. 使用ECharts绘制网址径向树状图

    an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...

  8. SqlServer-无限递归树状图结构设计和查询

    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...

  9. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

随机推荐

  1. Unity容器的简单AOP与DI的应用Demo（基于asp.net mvc框架）

    转发请注明出处:https://home.cnblogs.com/u/zhiyong-ITNote/ 整个Demo是基于Controller-Service-Repository架构设计的,每一层之间 ...

  2. VirtualBox 共享文件夹设置及使用方法

    工具:VirtualBox,ubuntu14.04 1.选择要设置共享文件夹的虚拟机,点击设置 点击共享文件夹,新建文件夹,选择路径 2.打开虚拟机,从上方工具栏中找到设备,然后点击安装增强功能(由于 ...

  3. SpringBoot使用数据库

    这一篇简单介绍一下SpringBoot配置数据库的配置(依赖和application.properties),以下全是以本地数据库为例子,具体用户名密码地址都根据实际去修改. Mysql数据库: po ...

  4. 8. Rotate String

    8. Rotate String Description Given a string and an offset, rotate string by offset. (rotate from lef ...

  5. BZOJ.2726.[SDOI2012]任务安排(DP 斜率优化)

    题目链接 数据范围在这:https://lydsy.com/JudgeOnline/wttl/thread.php?tid=613, 另外是\(n\leq3\times10^5\). 用\(t_i\) ...

  6. Cow Acrobats [POJ3045] [贪心]

    Description 农夫的N只牛(1<=n<=50,000)决定练习特技表演. 特技表演如下:站在对方的头顶上,形成一个垂直的高度. 每头牛都有重量(1 <= W_i <= ...

  7. K Besk [POJ 3111]

    描述 Demy有n颗宝石.她的每个珠宝都有一些价值vi和重量wi.自从丈夫约翰在最近的金融危机爆发后,已经决定出售一些珠宝.她决定自己会保留最好的珠宝.她决定保留这样的宝石,使他们的具体价值尽可能大. ...

  8. python之列表和生成器表达式篇

    一.协程函数的应用 写一个装饰器用于让协程函数不需要输入再执行一次next()函数 分析: 在装饰器中生成该协程函数的生成器, 并且执行一次next()函数 def firstNext(func): ...

  9. Hibernate(11)_基于外键的双向1对1

    一.基于外键的双向1对1 对于基于外键的1-1关联,其外键可以存放在任意一边,在需要存放外键一端,增加many-to-one元素.为many-to-one元素增加unique="true&q ...

  10. django之模版层（template）

    上篇主要介绍了django的MTV模型,主要介绍了视图层之路由配置系统url分发和视图层之视图函数view,本篇主要讲解MTV模型中的模版层template. 本篇导论: 模版简介 模版之变量 模版之 ...