<!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. 简单窗口与hbase数据库相连

    package shangke; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.event.Action ...

  2. pandas 基本操作

    1.     一维数据结构Series a.   概念:Series 是pandas 的一维数据结构,有重要的两个属性 index 和values b.  初始化: 可以通过 python 的 Lis ...

  3. git 合并子工程

    一.关于合并代码合并带有子工程更改的代码1.先git merge master --no-ff origin/devlop(把develop分支代码合并到master) 解决冲突等 2.进入到子工程目 ...

  4. LOJ.6068.[2017山东一轮集训Day4]棋盘(费用流zkw)

    题目链接 考虑两个\(\#\)之间产生的花费是怎样的.设这之间放了\(k\)个棋子,花费是\(\frac{k(k-1)}{2}\). 在\((r,c)\)处放棋子,行和列会同时产生花费,且花费和该行该 ...

  5. BZOJ.3165.[HEOI2013]Segment(李超线段树)

    BZOJ 洛谷 对于线段,依旧是存斜率即可. 表示精度误差一点都不需要管啊/托腮 就我一个人看成了mod(10^9+1)吗.. //4248kb 892ms #include <cstdio&g ...

  6. mongoDB,mongoose，没有数组就添加，如果有了数组，就向数组中添加新元素

    db.getCollection('photos').findOneAndUpdate("5b028e71f32bd5004f905879",   //findByIdAndUpd ...

  7. Python-copy()与deepcopy()区别

    http://blog.csdn.net/qq_32907349/article/details/52190796 学习过程中发现copy()和deepcopy()这对好基友实在是有点过分,搞的博主就 ...

  8. ES6 类

    ES6之前没有类的概念,一般采用以下方式来模仿类 基本的类声明语法 私有属性是实例中的属性,不会出现在原型上,且只能在类的构造函数中创建所有私有属性 PersonClass声明实际上创建了一个具有构造 ...

  9. Html列表：

    有序列表: 在网页上定义一个有编号的内容列表可以用<ol>.<li>配合使用来实现,如: <ol> <li>列表文字一</li> <l ...

  10. Python的JAVA胶水——jpype

    Python的JAVA胶水--jpype python可以作为一门胶水语言使用,可以用其它语言的优势来弥补自身如性能方面的不足,jpype就是在Python中使用jvm的第三方库 文档在这里 安装 s ...