精华内容
下载资源
问答
  • 做树状图的总结

    千次阅读 2019-06-09 20:01:35
    开发工具与关键技术:做树状图的总结 作者:李梓良 撰写时间:2019年6月8日 一, 做树状图的思路总结 (1).首先是引用插件 (2).引用完插件之后,就是再在div的代码里面分好区域,因为我是一边是树状图,另外 ...
    开发工具与关键技术:做树状图的总结 
    作者:李梓良
    撰写时间:2019年6月8日
    

    一, 做树状图的思路总结
    (1).首先是引用插件

    (2).引用完插件之后,就是再在div的代码里面分好区域,因为我是一边是树状图,另外 一边是表格,所以分成两边,一边靠左,所以在class那里就有左的代码,因为在插 件里面是被ul标签包裹的,所以直接可以在ul标签上加上ztree的插件名称就可以了,再最后设置树状图的大小,高度,还有隐藏属性 (3).然后是script的里面的代码,要注意的是,不要在原来的那些设置点击事件的script中添加代码,因为这样会报错,然后你要另外再创建一个script的标签,并且,还要在那个script标签下,加上方式type的"text/javascript",在插件中,刚用代码的做树形图的时候,会出现url=”#”这样的代码的,在这里,我是把这个部分删掉了的,因为,我要的效果是伸缩,然后其他的代码就是按照插件来的就行了

    二.做树状图代码部分

      <script type="text/javascript">
      var setting =
      {
      };
      var zNodes = [
      {
      id: 1, pId: 0, name: "服装", open: true,
      children: [
      { id: 11, pId: 1, name: "上衣", "url": "#" },
      { id: 12, pId: 1, name: "裤子", "url": "#" },
      { id: 13, pId: 1, name: "裙子", "url": "#" },
      { id: 14, pId: 1, name: "套装", "url": "#" }
      ]
      },
      {
      id: 2, pId: 0, name: "鞋子", open: true,
      children: [
      { id: 21, pId: 2, name: "男鞋", "url": "#" },
      { id: 22, pId: 2, name: "女鞋", "url": "#" }
      ]
      },
      {
      id: 3, pId: 0, name: "内衣", open: true,
      children: [
      { id: 31, pId: 3, name: "文胸", "url": "#" },
      { id: 32, pId: 3, name: "内裤", "url": "#" }
      ]
      },
      ];
      $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
      

      三.做树状图效果图部分:
      在这里插入图片描述

      展开全文
    • 运用R做树状图

      千次阅读 2016-07-18 09:27:04
      利用R作树状图
      R中的原地址为
      

      http://rstudio-pubs-static.s3.amazonaws.com/1876_df0bf890dd54461f98719b461d987c3d.html

      考虑到原地址可能失效,这里做简单的翻译和备份,有关聚类的R包可以参考cluster包和ape包


      以下是正文:


      The most basic dendrogram

      Let's start with the most basic type of dendrogram. For that purpose we'll use themtcars dataset and we'll calculate a hierarchical clustering with the functionhclust (with the default options).

      让我们从最基本聚类树状图开始。为此目的,我们将使用mtcars数据集和我们计算的层次聚类hclust函数(与默认选项

      # prepare hierarchical cluster 生成层次聚类
      hc = hclust(dist(mtcars))
      # very simple dendrogram     默认画法
      plot(hc)


      We can put the labels of the leafs at the same level like this

      我们可以将样本定义在同一水平 (实在不明白help一下plot函数)

      A less basic dendrogram

      In order to add more format to the dendrograms, we need to tweek the right parameters. For instance, we could get the following graphic (just for illustration purposes!)

      一个基本的树状图

      为了增加更多格式的图,我们需要修改正确的参数。例如我们可以得到下面的图形(仅作说明用途

      par(op)

      ##这里强调一下,par()是对图进行自动调整,貌似功能还挺强大的。新浪有位哥们儿总结得特别好,附赠地址:

      http://blog.sina.com.cn/s/blog_8f5b2a2e0102v0tf.html

      貌似可以靠par()函数调整图的坐标轴什么的,我没试过哦~~

      Alternative dendrograms

      An alternative way to produce dendrograms is to specifically convert hclust objects intodendrograms objects

      另类聚类图

      将hclude生成的对象转换为另类的聚类图

      # using dendrogram objects
      hcd = as.dendrogram(hc)
      # alternative way to get a dendrogram
      plot(hcd)

      Having an object of class dendrogram, we can also plot the branches in a triangular form

      画完这个画三角形的

      Zooming-in on dendrograms

      Another very useful option is the ability to inspect selected parts of a given tree. For instance, if we wanted to examine the top partitions of the dendrogram, we could cut it at a height of 75

      放大在树状图

      另一个非常有用的功能是选择树的一部分。例如如果我们要研究的树状图的分区我们可以把它在一个高度75

      # plot dendrogram with some cuts
      op = par(mfrow = c(2, 1))
      plot(cut(hcd, h = 75)$upper, main = "Upper tree of cut at h=75")
      plot(cut(hcd, h = 75)$lower[[2]], main = "Second branch of lower tree with cut at h=75")

      par(op)

      Customized dendrograms

      In order to get more customized graphics we need a little bit of more code. A very useful resource is the functiondendrapply that can be used to apply a function to all nodes of a dendrgoram. This comes very handy if we want to add some color to the labels.

      为了获得更多的定制的图形,我们需要更多的代码。一个非常有用的功能dendrapply可以应用一个函数的一dendrgoram所有节点。如果我们要添加一些色彩的标签这是非常方便的


      # vector of colors labelColors = c('red', 'blue', 'darkgreen', 'darkgrey',
      # 'purple')
      labelColors = c("#CDB380", "#036564", "#EB6841", "#EDC951")
      # cut dendrogram in 4 clusters
      clusMember = cutree(hc, 4)
      # function to get color labels
      colLab <- function(n) {
          if (is.leaf(n)) {
              a <- attributes(n)
              labCol <- labelColors[clusMember[which(names(clusMember) == a$label)]]
              attr(n, "nodePar") <- c(a$nodePar, lab.col = labCol)
          }
          n
      }
      # using dendrapply
      clusDendro = dendrapply(hcd, colLab)
      # make plot
      plot(clusDendro, main = "Cool Dendrogram", type = "triangle")
      

      Phylogenetic trees

      A very nice tool for displaying more appealing trees is provided by the R packageape. In this case, what we need is to convert thehclust objects intophylo pbjects with the funtions as.phylo

      系统进化树

      由R包ape提供更具吸引力的树非常好的工具我们利用as.phylo功能将hclust objects转换成phylo对象

      # load package ape; remember to install it: install.packages('ape')
      library(ape)
      # plot basic tree
      plot(as.phylo(hc), cex = 0.9, label.offset = 1)


      The plot.phylo function has four more different types for plotting a dendrogram. Here they are:

      plot.phylo函数的4种不同类型的聚类树形图

      # cladogram
      plot(as.phylo(hc), type = "cladogram", cex = 0.9, label.offset = 1)

      # unrooted
      plot(as.phylo(hc), type = "unrooted")

      下面是我最喜欢的圆形树形图

      # fan   
      plot(as.phylo(hc), type = "fan")

      # radial
      plot(as.phylo(hc), type = "radial")

      Customizing phylogenetic trees

      What I really like about the ape package is that we have more control on the appearance of the dendrograms, being able to customize them in different ways. For example:

      自定义的系统进化树

      ape 包对树的性状有着很多控制,能够定制他们以不同的方式。例如

      # add colors randomly
      plot(as.phylo(hc), type = "fan", tip.color = hsv(runif(15, 0.65, 
          0.95), 1, 1, 0.7), edge.color = hsv(runif(10, 0.65, 0.75), 1, 1, 0.7), edge.width = runif(20, 
          0.5, 3), use.edge.length = TRUE, col = "gray80")
      


      Again, we can tweek some parameters according to our needs

      我们可以根据需求修改一些参数

      # vector of colors
      mypal = c("#556270", "#4ECDC4", "#1B676B", "#FF6B6B", "#C44D58")
      # cutting dendrogram in 5 clusters
      clus5 = cutree(hc, 5)
      # plot
      op = par(bg = "#E8DDCB")
      # Size reflects miles per gallon
      plot(as.phylo(hc), type = "fan", tip.color = mypal[clus5], label.offset = 1, 
          cex = log(mtcars$mpg, 10), col = "red")
      

      par(op)
      

      Color in leaves

      彩色叶子节点

      The R package sparcl provides the ColorDendrogram function that allows to add some color. For example, we can add color to the leaves

      R包还提供ColorDendrogram功能来让我们给聚类树点颜色看看。比如我们可以给叶子节点来点颜色

      # install.packages('sparcl')
      library(sparcl)
      # colors the leaves of a dendrogram
      y = cutree(hc, 3)
      ColorDendrogram(hc, y = y, labels = names(y), main = "My Simulated Data", 
          branchlength = 80)
      

      ggdendro

      For reasons that are unknown to me, the The R package ggplot2 have no functions to plot dendrograms. However, the ad-hoc packageggdendro offers a decent solution. You would expect to have more customization options, but so far they are rather limited. Anyway, for those of us who are ggploters this is another tool in our toolkit.

      R包ggplot2没有功能绘制树状图的原因我不知道。然而,包ggdendro提供一个像样的解决方案。你希望有更多的自定义选项,但到目前为止他们相当有限。不管怎样对于我们这些谁是ggploters这是我们工具的另一个工具


      # install.packages('ggdendro')
      library(ggdendro)
      # basic option
      ggdendrogram(hc)
      

      # another option
      ggdendrogram(hc, rotate = TRUE, size = 4, theme_dendro = FALSE, color = "tomato")

      # Triangular lines
      ddata <- dendro_data(as.dendrogram(hc), type = "triangle")
      ggplot(segment(ddata)) + geom_segment(aes(x = x, y = y, xend = xend,
          yend = yend)) + ylim(-10, 150) + geom_text(data = label(ddata), aes(x = x,
          y = y, label = label), angle = 90, lineheight = 0)


      Colored dendrogram

      Last but not least, there's one more resource available from Romain Francois'saddicted to Rgraph gallery which I find really interesting. The code in R for generating colored dendrograms, which you can download and modify if wanted so, is availablehere

      最后,你可以到罗曼弗朗索瓦的图形库里面进一步学习~~~

      你甚至可以修改他的代码

      地址是:

      http://gallery.r-enthusiasts.com/RGraphGallery.php?graph=79 (貌似要翻墙)

      http://addictedtor.free.fr/packages/A2R/lastVersion/R/code.R

      # load code of A2R function
      source("http://addictedtor.free.fr/packages/A2R/lastVersion/R/code.R")
      # colored dendrogram
      op = par(bg = "#EFEFEF")
      A2Rplot(hc, k = 3, boxes = FALSE, col.up = "gray50", col.down = c("#FF6B6B", 
          "#4ECDC4", "#556270"))
      

      par(op)

      # another colored dendrogram
      op = par(bg = "gray15")
      cols = hsv(c(0.2, 0.57, 0.95), 1, 1, 0.8)
      A2Rplot(hc, k = 3, boxes = FALSE, col.up = "gray50", col.down = cols)


      par(op)

      展开全文
    • JSP中做树状图的工具

      2008-07-30 13:48:44
      这个插件可以做出好漂亮的树状图
    • flex 树状图

      2013-10-18 14:56:26
      flex 的一个树状图 图例清新 结构清晰
    • 一、刚学习项目里就有使用到树状图这个功能,树状图这个功能是要用到插件才能的,我目前发现有两个插件的样式是比较好看的,一个是Layui里面自带的树组件,不过它的文档写的挺少的,而且看不懂;另一个是jquery的...

      一、刚学习项目里就有使用到树状图这个功能,树状图这个功能是要用到插件才能做的,我目前发现有两个插件的样式是比较好看的,一个是Layui里面自带的树组件,不过它的文档写的挺少的,而且看不懂;另一个是jquery的zTree_v3插件也是我现在要说的插件,它的配套文档写的挺多的,但是呢,好吧依然看不懂。

      在这里插入图片描述

      二、在经历了不断上网查找方法和不断地询问同学后,差不多花了一个星期才把它的增删查改的功能完成。虽然插件配套的案例它里面也有可以实现增改删的功能,但那些都是静态的样式基本上是写死了,要实现动态的修改就必须和数据库交互。

      数据库设计样式

      在这里插入图片描述

      三、数据生成树型

      1、首先在控制器查询分类表,查询的方法就是个单表的查询,查询出数据后,再分别把主键id、名称、父id 给到 id、name、pId 里面去。注意!插件只认这三个值名称写错都不行。

      在这里插入图片描述

      2、然后页面再通过下面的方法给树赋值,并且生成树型。我之前写的用json提交的方式会有一个异步的问题,它的有些功能就有时会比它先运行,这就出现了功能时有时无的现象,这并不是我们所希望的,在这里时就要把异步去掉

      3、后面的就是默认加载时展开选择的方法,后面修改时回填可以把默认选择的id号改成一个变量,再从其他地方获取到值也是可以的

      $(document).ready(function () {
                  $.ajax({
                      url: "/ClienteleManagement/Client/Classification",
                      data: { ProjectId: "@ViewBag.ProjectId" },
                      type: "post",
                      dataType: "json",
                      async: false,
                      success: function (data) {
                          $.fn.zTree.init($("#treeDemo"), setting, data);//实现加载树的方法
                      }
                  })
                  //默认选中树形图的节点
                  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                  var nodes = treeObj.getNodes();
                  if (nodes.length > 0) {
                      var node = treeObj.getNodeByParam("id", 1);//默认选择的id号 1
                      if (node) {
                          treeObj.selectNode(node);
                      }
                  }
      //全部展开树形节点 不写则只展开到选择的id号
                  treeObj.expandAll(true);
              });
      
      
      
      展开全文
    • ztree插件树状图

      2019-06-27 21:50:37
      树状图不知道大家有没有过,要不是项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵逼,后来老师发一个插件下来,经过和同学的讨论终于有了理解,但不能说100%的了解...

      开发工具与关键技术:MVC

      作者:Mr_恺

      撰写时间:2019年6月27日

      树状图不知道大家有没有做过,要不是做项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵逼,后来老师发一个插件下来,经过和同学的讨论终于有了理解,但不能说100%的了解,只是了解了一部分。

      树状图加载数据可以分为两种:一种动态添加,另外一种固定的,手动添加。

      现在我就做动态添加的,是从数据库中查询出来:

      先用zTreeStyle.css和jquery.ztree.core.js插件

      布局:

      Css样式:

      到js配置树状图参数:

      把参数传到控制器:从数据库查询出来

      出来的效果:

      现在的样式是原生的,我们可以改图片,点击事件回调,设置单选框,复选框等等,有很多事件功能让我们去了解。

      展开全文
    • ArcGIS中的树状图

      2015-04-22 09:56:13
      构造可显示特征文件中连续合并类之间的属性距离的树示意图(树状图)。
    • tableau:树状图

      2020-05-13 21:01:07
      案例1:画出酒店类型的树状图 ‘类型’拖到‘列’,‘记录数’拖到‘行’,然后点击‘智能显示’的‘树状图’ 之后就是这样啦: 可以继续优化: 添加标签,调整配色 筛选数量:(比如只显示大于20的) 案例2:...
    • winfrom磁盘树状图

      2018-06-13 10:47:00
      winfrom 读取电脑的磁盘数量,并根据磁盘查询磁盘下所有文件,并将文件/目录名称装在TreeView控件中---递归写法
    • html实现的树状图

      热门讨论 2011-05-21 15:43:25
      jquery html实现的树状图,样式精美,带鼠标经过和点击时的样式
    • vue-tree树状图,横向树状图,流程图

      千次阅读 2020-08-26 15:28:45
      souce git:https://github.com/zhuyuhaoliar/vue-tree-right ...vue-tree-right Usage npm install vue-tree-right 1.import TreeRight from "vue-tree-right" 2.components: { TreeRight, ...3.list: [//datasource
    • Tableau图表 • 树状图

      千次阅读 2019-01-17 16:12:30
      树状图,一种在层次结构中嵌套矩形的可视化,通常用来展示数据的比例关系及层次关系,还可以比较维度中各个部分对整体的贡献情况。 这里使用tableau自带的超市示例数据集,创建类别产品销售额的树状图树状图...
    • Python画树状图

      千次阅读 2020-07-19 20:13:17
      import matplotlib.pyplot as plt import squarify my_dpi=96 plt.figure(figsize=(480/my_dpi, 480/my_dpi), dpi=my_dpi) squarify.plot(sizes=[13,22,35,5], label=["group A", "group B", "group C", "group D...
    • ArcGIS教程:树状图

      2015-07-23 16:43:08
      构造可显示特征文件中连续合并类之间的属性距离的树示意图(树状图)。
    • 一、 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的。就比如文件资源管理器里面左侧...二、 但是这东西是怎么出来的呢,因为我的项目里面就有用到这个树状图,刚开始尝试着自己打...
    • zTree(二)树状图下拉框

      万次阅读 2018-05-22 11:10:20
      需求 添加、修改终端需要选择组织,组织是...1、因为下拉框需要树状图显示,所以排除使用select下拉框,改用input 模拟下拉框 2、树状图采用zTree插件 开工 1、布局 &amp;amp;lt;script src=&amp;quot;...
    • Python 树状图怎么画

      千次阅读 2018-08-23 17:56:03
      一颗简单的树状图怎么用python画出来呢,我们来研究一下树高是5的小树: 比如我们想让系统生成一个形状如下的��,树高是5 @ 4个空格1个@ @@@ 3个空格3个@ @@@@@ 2个空格5个@ @@@@@@@ 1个空格7个@ @@@@@@@@@ 0...
    • 制作树状图思路

      2020-05-09 10:46:01
      开发工具与关键技术: VS2015 mvc 制作一个简单的树状图需要知道什么?; 作者:刘佳明 需要插件为: <link href="~/Scripts/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="~/...
    • [img=https://img-bbs.csdn.net/upload/201407/25/1406251424_508186.jpg][/img]
    • Echart圆形的树状图

      千次阅读 2018-11-23 18:00:36
      Echart里面有树状图和关系图 是有区别的 要根据数据的特点选择用哪一个 关系图大多是圆的,表面看上去,跟圆形的树状图很像,但是,实质的数据关系是不一样的。 选择图表的类别很重要。一开始选错了,结果就都错...
    • # 求高手发个参考代码, 在线等,急!!!
    • d3.js——树状图的绘制

      万次阅读 热门讨论 2016-04-27 13:51:10
      树状图和集群图其实差不多,就一点点不一样,见下图: 图(1):集群图——d3.layout.cluster() 图(2):树状图——d3.layout.tree() 这样一来差别就看出来了。由于两者的代码差不多,这里就直接附上树状图...
    • R语言绘制环形树状图

      2021-05-28 10:10:55
      R语言绘制环形树状图 1.主要用到dendextend和circlize包绘图; library(dendextend) library(circlize) # 距离矩阵 d <- dist(USArrests) # 分层聚类树状图 hc <- as.dendrogram(hclust(d)) # 绘制环状系统...
    • Matlab绘制聚类分析树状图

      千次阅读 2019-08-27 13:31:48
      工作环境(蓝色粗体字为特别注意内容)1、软件环境:Windows 7 Ultimate sp1、MatlabR2012b 32bit. 在使用Matlab聚类...这样调用dendrogram就能够自动生成树状图,默认显示30个节点的树状图,像下面这样 如果...
    • 基于OrgChart技术流程图[树状图]
    • 用vs2010 的 用了树控件 列表控件
    • markdown 树状图、流程图学习

      万次阅读 2019-11-24 15:48:37
      read / writeread onlyread / writeread onlystore the dataclient1SVN serverclient2client3client4...sharedrive
    • ![图片说明](https://img-ask.csdn.net/upload/201905/29/1559098129_361422.png) !... 请教各位,第一张图是数据结构,第二个是要成的原型。我自己不知道怎么设计这个树状图的类,请指点一下!
    • 在页面中如何用js或者插件生成多叉树状图结构,就像这样: ![图片说明](https://img-ask.csdn.net/upload/201711/17/1510904545_634368.png)

    空空如也

    空空如也

    1 2 3 4 5 ... 20
    收藏数 44,022
    精华内容 17,608
    关键字:

    如何做树状图