<!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. Linux下 nfs部署

    一. 挂载一个硬盘来分享 二. 更改配置文件 三. 在配置文件中设置属性 四.     另一台机器   配置的虚拟机,将nfs关闭  配置文件也删除内容       挂载  挂载到部署nfs的极其 之 ...

  2. linux 硬盘分区与格式化挂载

    1. 硬件设备与文件名的对应关系(详见linux系统管理P297)1) 掌握在Linux系统中,每个设备都被当初一个文件来对待.2) 掌握各种设备在Linux中的文件名 2. 硬盘的结构及硬盘分区(详 ...

  3. 块级元素或者行内元素在设置float属性之后是否改变元素的性质？

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  4. 【DWM1000】 code 解密8一 TAG接收blink response 信号

    在分析这个部分前,目前我看到DWM1000 的资料,data可以分为blink和一般无线数据,后面有内容我们再扩充, 上面我们已经看到接收到blink触发的事件为 case SIG_RX_BLINK ...

  5. ajax中的async属性值之同步和异步及同步和异步区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...

  6. VS Code编写Python3 insert 数据库插入无效也不报错的坑~.~

    标题最近在开发中需要用到web端开发工具.需要用python工具.偶然发现微软的良心之作:Visual Studio Code,这个大小才几十兆的轻量级代码编辑器,功能却是重量级的,通过插件的方法,, ...

  7. 读《31天学会CRM项目开发》记录3 - CRM解决方案

    一. 二.CRM系统设计方案 CRM技术部分设计方案主要包括:服务器端设计方案.客户端设计方案.数据库设计方案.应用系统框架设计方案. 1.服务器端设计方案 配备平台:IIS7和SQL Server2 ...

  8. java 程序运行过程 简介

    这里的Java程序运行过程,是指我们编译好代码之后,在命令行开始执行java xxx命令,到java程序开始执行起来的这一过程,我们称其为运行时. 第一步,操作系统解析我们输入的java xxx命令, ...

  9. 【网站管理6】_一个网站SEO优化方案

    首先,前端/页编人员主要负责站内优化,主要从四个方面入手: 第一个,站内结构优化 合理规划站点结构(1.扁平化结构 2.辅助导航.面包屑导航.次导航) 内容页结构设置(最新文章.推荐文章.热门文章.增 ...

  10. PLC300寻址指令

    1.寻址图解 2.直接寻址 直接寻址包括两大类,绝对地址寻址和符号地址寻址 绝对地址:由一个标识符和存储器位置组成. 例如:I 0.0 Q 1.7 PIW 256 PQW 512 MD 20 T 15 ...