<!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. pyquery 库的方法

    初始化 在这里介绍四种初始化方式. (1)直接字符串 from pyquery import PyQuery as pq doc = pq("<html></html> ...

  2. position 属性的值的比较

    可取的四个值:static/relative/absolute/fixed static:默认值,top/right/bottom/left 无作用,z-index无效 relative:相对于原来的 ...

  3. 【树形期望DP】BZOJ3566- [SHOI2014]概率充电器

    [题目大意] 充电器由 n-1 条导线连通了 n 个充电元件.这n-1条导线均有一个通电概率p%,而每个充电元件本身有直接被充电的概率q[i]%.问期望有多少个充电元件处于充电状态? [思路] 第一次 ...

  4. JavaScript基础笔记（十一）JSON

    JSON 关于JSON,最重要的一点是理解它是一种数据格式,不是编程语言. 一.语法 JSON 不支持变量.函数或对象实例,它就是一种表示结构化数据的格式,虽然与 JavaScript 中表示数据的某 ...

  5. 简单配置umiJS学习笔记

    最近跟着Antd-Pro官方教程学习umi,这里给大家推荐一下这个教程,特别适合初学者学习,教程涉及了AntD,AntD-Pro,umiJS,dvaJS等框架知识. 学习过程中跟着教程做了个Demo, ...

  6. Apache JMeter5 设置中文

    Apache JMeter5 下载: apache-jmeter-5.0.zip apache-jmeter-5.0.tgz 注意:JMeter5需要Java8 以上,本文环境是Win7 64位 1. ...

  7. C Windows控制台字符版本俄罗斯方块

    //一个可以工作在Windows控制台字符界面下的俄罗斯方块 //工作在非图形模式,无需其他库依赖,单个C文件代码即可运行 //支持最高纪录,并且对于纪录进行了加密 //By wrule 2015年1 ...

  8. Yii2 数组助手类arrayHelper

    数组助手类 ArrayHelper 1.什么是数组助手类 Yii 数组助手类提供了额外的静态方法,让你更高效的处理数组. a.获取值(getValue) class User { public $na ...

  9. Mysql常用语句/group by 和 having子句

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ explain: ~~~~~~~~~~~~~~~~~ ...

  10. PHP03

    PHP03 1.提交地址: action.用户点击提交后,发送请求的地址.一般为了便于维护,最常见的是提交给当前文件,然后在当前文件判断是否为表单提交请求,表单的处理逻辑放在Html之前,为了避免写死 ...