<!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. 使用Log4j日志处理

    Springboot日志默认使用的是logback,本文将介绍将springboot项目日志修改为log4j. 首先要将默认的日志依赖排除,然后引用log4j,pom文件代码如下: <?xml ...

  2. BZOJ.3504.[CQOI2014]危桥(最大流ISAP)

    BZOJ 洛谷 这种题大多是多源多汇跑网络流.往返\(a_n/b_n\)次可以看做去\(a_n/b_n\)次,直接把危桥能走的次数看做\(1\). 先不考虑别的,直接按原图建模:危桥建双向边容量为\( ...

  3. Scrapy基础(十二)————异步导出Item数据到Mysql中

    异步导出数据到Mysql中 上次说过从Item中同步写入数据库,因为网络的下载速度和数据库的I/O速度是不一样的所以有可能会发生下载快,但是写入数据库速度慢,造成线程的堵塞:关于堵塞和非堵塞,同步和异 ...

  4. luffy项目的接口开发

    处理跨域请求 主要的思路: 设置一个基于CORS的中间件来处理,关于跨域的产生与处理手段 settings.py: MIDDLEWARE = [ 'django.middleware.security ...

  5. fastjson 使用教程

    fastjson 是阿里的开源项目,具网上的说法 fastjson 的解析速度是 Gson 的6倍,体积小,而且开源. 项目地址: https://github.com/alibaba/fastjso ...

  6. Cocos Creator存储和读取用户数据--官方文档

    存储数据 cc.sys.localStorage.setItem(key, value) 上面的方法需要两个参数,用来索引的字符串键值 key,和要保存的字符串数据 value. 假如我们要保存玩家最 ...

  7. Hibernate简答题

    简单题目 1.持久化对象的三种状态,代表含义. 自由状态(transient): 不曾进行持久化,未与任何Session相关联 持久化状态(persistent): 仅与一个Session相关联 游离 ...

  8. list-列表练习

    #list列表取值更方便灵活 列表.数组说的都是1个东西#列表中每个字符都有一个编号,就是我们说的下标,从0开始#如果你输入的下标在列表中不存在,会报下标越界的错误 1.查询user表中下标为0的记录 ...

  9. ios真机中Text组件出现多余边框

    问题 ios真机中Text组件出现多余边框(模拟器不会出现,真机会出现该问题). 原因 在ios启动页设置中,预设的尺寸要求与设置中图片尺寸不符合导致屏幕精度计算出现问题(启动屏分辨率错误设置会导致手 ...

  10. 牛客网-C++

    2017/8/18 程序运行结束时才释放:静态变量在内存的静态存储区,静态数据一直占有着该存储单元直到程序结束:一般局部变量在函数调用结束后释放变量占用的存储单元,而静态局部变量不释放. 静态全局变量 ...