精华内容
下载资源
问答
  • 本示例是基于Typescript 和 D3 五版本绘制树状图。 网上绝大多数都是D3 3版本,四版本也有一些示例,比较少,5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例: 直接上代码: /** * create by yanle * ...

    本示例是基于Typescript 和 D3 五版本绘制树状图。

    网上绝大多数都是D3 3版本,四版本也有一些示例,比较少,5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例:

    直接上代码:

    /**
     * create by yanle
     * create time 2018-10-30 15:21
     */
    import {hierarchy, tree} from "d3-hierarchy";
    import {DefaultLinkObject, line, Link, linkHorizontal, linkVertical} from "d3-shape";
    import {select, selectAll} from "d3-selection";
    
    class Demo8 {
        private treeData: any = {
            "name": "中国",
            "children":
                [
                    {
                        "name": "浙江",
                        "children":
                            [
                                {"name": "杭州"},
                                {"name": "宁波"},
                                {"name": "温州"},
                                {"name": "绍兴"}
                            ]
                    },
    
                    {
                        "name": "广西",
                        "children":
                            [
                                {
                                    "name": "桂林",
                                    "children":
                                        [
                                            {"name": "秀峰区"},
                                            {"name": "叠彩区"},
                                            {"name": "象山区"},
                                            {
                                                "name": "七星区",
                                                "children":
                                                    [
                                                        {"name": "哈尔滨"},
                                                        {"name": "齐齐哈尔"},
                                                        {"name": "牡丹江"},
                                                        {"name": "大庆"}
                                                    ]
                                            }
                                        ]
                                },
                                {"name": "南宁"},
                                {"name": "柳州"},
                                {"name": "防城港"}
                            ]
                    },
    
                    {
                        "name": "黑龙江",
                        "children":
                            [
                                {"name": "哈尔滨"},
                                {"name": "齐齐哈尔"},
                                {"name": "牡丹江"},
                                {"name": "大庆"}
                            ]
                    },
    
                    {
                        "name": "新疆",
                        "children":
                            [
                                {"name": "乌鲁木齐"},
                                {"name": "克拉玛依"},
                                {"name": "吐鲁番"},
                                {"name": "哈密"}
                            ]
                    }
                ]
        };
    
        main() {
            let width: number = 900;
            let height: number = 1400;
            let treeWidth: number = width - 50;
            let treeHeight: number = height - 50;
    
            let treeMain = tree()
                .size([width, treeWidth - 300])
                .separation(function (a, b) {
                    return (a.parent === b.parent) ? 1 : 2
                });
    
    
            const hierarchyData = hierarchy(this.treeData).sum(function (d) {
                return d.value
            });
    
            // 这样写是为了 让数据横向显示 x, y 互换
            const renderLink: Link<any, DefaultLinkObject, [number, number]> = linkHorizontal().x(function (d: any) {
                return d.y
            }).y(function (d: any) {
                return d.x
            });
    
            const lineMain = line();
    
            // 创建svg
            let svg = select('body')
                .append('svg')
                .attr('width', treeWidth)
                .attr('height', treeHeight)
                .append('g')
                .attr('transform', 'translate(40, 0)');
    
            let g = svg.append('g').attr('transform', 'translate(40, 40)');
    
    
            treeMain(hierarchyData);
            const nodes = hierarchyData.descendants();
            const links = hierarchyData.links();
    
    
            // 绘制线
            g.selectAll('.link')
                .data(links)
                .enter()
                .append('path')
                .attr('class', 'link')
                .attr("fill", "none")                           // 这个是取消默认填充色
                .attr("stroke", "#000")                         // 给与一个自己的 外框填充色
                .attr('d', function (d: any) {
                    return renderLink(d)
                });
    
            // 绘制节点
            g.selectAll('.node')
                .data(nodes)
                .enter()
                .append('g')
                .attr('class', 'node')
                .attr('transform', function (d: any) {              // 这样写是为了 让数据横向显示
                    return `translate(${d.y}, ${d.x})`
                });
            g.selectAll('.node')
                .append('circle')
                .attr('r', 5)
                .attr('fill', 'green');
    
            // 绘制文字
            g.selectAll('.node')
                .append('text')
                .attr('dy', 3)
                .attr('x', function (d: any) {
                    return d.children ? -8 : 8;
                })
                .attr('text-anchor', function (d: any) {
                    return d.children ? 'end' : 'start'
                })
                .text(function (d: any) {
                    return d.data.name
                })
                .style('font-size', '18px')
        }
    }
    
    export default Demo8;

     

    相关api介绍:

    api | 说明
    :- | :- 
    **d3.hierarchy** | **从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性.**
    node.ancestors | 从当前节点开始返回其祖先节点数组.
    node.descendants | 从当前节点开始返回其后代节点数组.
    node.leaves | 返回当前节点为根节点的子树的叶节点.
    node.path | 返回从当前节点到指定目标节点的最短路径.
    node.links | 返回当前节点所在子树的所有边.
    node.sum | 评估和汇总定量值.
    node.sort | 排序所有的后代兄弟节点.
    node.count | 统计叶节点的个数.
    node.each | 广度优先遍历当前子树.
    node.eachAfter | 后续遍历当前子树.
    node.eachBefore | 前序遍历当前子树.
    node.copy | 拷贝一个当前节点为根节点的子树的副本.
    **d3.stratify** | **创建一个新的分层操作.**
    stratify | 根据扁平数据创建一个分层数据.
    stratify.id | 设置节点 id 访问器.
    stratify.parentId | 设置父节点 id 访问器.
    **d3.cluster** | **创建一个新的集群(系统树图)布局.**
    cluster | 将指定的数据布局为系统树图.
    cluster.size | 设置布局尺寸.
    cluster.nodeSize | 设计节点尺寸.
    cluster.separation | 设置两个叶节点之间的间距.
    **d3.tree** | **创建一个新的整齐(同深度节点对齐)的树布局.**
    tree | 将指定的层次数据布局为整齐的树布局.
    tree.size | 设置布局尺寸.
    tree.nodeSize | 设置节点尺寸.
    tree.separation | 设置两个相邻的节点之间的间距.

     

    具体项目请见github: https://github.com/yanlele/D3.js-learning

    展开全文
  • JS插件绘制树状图

    2017-12-22 16:23:04
    JS绘制树状图插件 可用于绘制各种关系网络图等 插件体积小
  • QT绘制树状图,根据示例代码diagramscene修改,支持拖拽,编辑文字,修改背景颜色,字体大小和颜色,方框放大缩小,箭头连线等功能
  • 使用绘制树状图的节点,目的是创建交互式树状图,其叶子链接到它们所代表的热图。 目前处于开发的早期阶段。 去做 删除所有vis.js屎,这样我们就只需要必需的js和css文件 解析JSON数据,以便获得一组坐标
  • Python应用实战代码-python爬取股票最新数据并用excel绘制树状图
  • 绘制不同类型电影数量和票房树状图 数据展示 操作步骤 1、拖拽维度「电影类型」、度量「记录数」分别到行、列功能区; 2、智能显示选择树状图; 3、标记卡的颜色 — 编辑颜色 — 绿蓝发散 —...

    手把手教你 Tableau 绘制树状图

    树状图是一种相对简单的数据可视化形式,可通过具有视觉吸引力的格式提供见解。

    使用树状图可在嵌套的矩形中显示数据。可使用维度定义树状图的结构,使用度量定义各个矩形的大小或颜色。

    绘制不同类型电影数量和票房树状图

    数据展示

    在这里插入图片描述

    操作步骤

    1、拖拽维度「电影类型」、度量「记录数」分别到行、列功能区;

    2、智能显示选择树状图;

    3、标记卡的颜色 — 编辑颜色 — 绿蓝发散 — 倒序;

    4、拖拽「累计票房(万)」、「记录数」到标记中的标签;

    5、编辑标签显示格式;

    6、拖拽度量「累计票房(万)」到标签中的颜色;

    7、右键空白区域选择「总计(记录数)」筛选器。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 制作树状图思路

    2020-05-09 10:46:01
    开发工具与关键技术: VS2015 mvc 制作一个简单的树状图需要知道什么?; 作者:刘佳明 需要插件为: <link href="~/Scripts/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="~/...

    开发工具与关键技术:    VS2015       mvc      制作一个简单的树状图需要知道什么? 

    作者:刘佳明

    需要插件为:

    <link href="~/Scripts/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
      <script src="~/Scripts/zTree/jquery.ztree.core-3.5.js"></script>
    

    HTML:
     

     <div class="con">
    
                <div class="containOne">
    
                   <b>系统角色</b>  
    
                <ul id="treeOne" class="ztree node_name"></ul>
    
            </div>
    
    

    Javascript:

    <script>
            //树形图的配置参数
            var setting = {
                async: {
                    enable: true//设置 zTree 是否开启异步加载模式
                },
                data: {
                    simpleData: {
                        enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
                    }
                },   
            };
            $(function () {
                $.ajaxSettings.async = false;//取消异步
                $.post("/IndexDemo/GongNengZtree", function (data) {
                    console.log(data);
                    $.fn.zTree.init($("#treeOne"), setting, data);///初始化树形
                })
            })
    </script>

     

     

    控制器中的方法:

      public ActionResult GongNengZtree()
            {
                var List = (from tb in myModel.S_Module
                            select new zTreeNode
                            {
                                SID = tb.ModuleID,
                                PID = tb.ModuleID,
                                NodeName = tb.Module
                            }).ToList();
                List<Dictionary<string, Object>> jsonlist = new List<Dictionary<string, object>>();
                List<zTreeNode> ztree = new List<zTreeNode>();
                for (int i = 0; i < List.Count; i++)
                {
                    zTreeNode tree = new zTreeNode();
                    if (i==0)
                    {
                        tree.PID =0;//父亲id  
                        tree.SID = 0;//儿子id 
                        tree.NodeName = List[i].NodeName.ToString();//节点名
                        List.Add(tree);
                    }
                    else
                    {
                        tree.PID = 0;//父亲id  
                        tree.SID = List[i].SID;//儿子id 
                        tree.NodeName = List[i].NodeName.ToString();//节点名
                        ztree.Add(tree);//将对象添加到List<T>的结尾处
                    }
                }
                foreach (var modle in ztree)
                {
                    Dictionary<string, object> jsonZtree = new Dictionary<string, object>();
                    jsonZtree.Add("pId", modle.PID);
                    jsonZtree.Add("id", modle.SID);
                    jsonZtree.Add("name", modle.NodeName);
                    jsonlist.Add(jsonZtree);
                }
                return Json(jsonlist, JsonRequestBehavior.AllowGet);
            }
    

     

    效果图如下:

     

    数据库的结构是这样的:

     

    通过相同的方法还可以实现出如下的效果:(对应的数据库结果不在局限于一个表:)

    ztree官网文档 

    链接:http://www.treejs.cn/v3/main.php#_zTreeInfo

     

    展开全文
  • excel树状图2.1. 简单的树状图2.2. 带有增长率的树状图2.3.1. 增长率配色2.3.2. VBA填充色块颜色 大家好,最近大A的白马股们简直跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊。 不过从...


    大家好,最近大A的白马股们简直跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊。

    跌妈不认

    不过从金融界最近一个交易日的大盘云图来看,其实很多中小股还是红色滴,绿的都是白马股们。

    以下截图来自金融界网站-大盘云图

    2月26日大盘云图

    那么,今天我们试着用python爬取最近交易日的股票数据,并试着用excel简单绘制以下上面这个树状图。本文旨在抛砖引玉,吼吼。

    1. python爬取网易财经不同板块股票数据

    目标网址

    http://quotes.money.163.com/old/#query=hy010000&DataType=HS_RANK&sort=PERCENT&order=desc&count=24&page=0

    网易财经-行情中心

    由于这个爬虫部分比较简单,这里不做过多赘述,仅介绍一下思路并附上完整代码供大家参考。

    爬虫思路

    1. 请求目标网站数据,解析出主要行业(新)的数据:行业板块名称及对应id(如金融,hy010000)
    2. 根据行业板块对应id构造新的行业股票数据网页
    3. 由于翻页网址不变,按照《》的里的套路找到股票列表数据的真实地址
    4. 代入参数,获取全部页数,然后翻页爬取全部数据

    爬虫代码:

    # -*- coding: utf-8 -*-
    """
    Created Feb 28 10:30:56 2021
    
    @author: 可以叫我才哥
    """
    
    import requests
    import re
    import pandas as pd
    
    # 获取全部板块及板块id
    url = 'http://quotes.money.163.com/old/#query=hy001000&DataType=HS_RANK&sort=PERCENT&order=desc&count=24&page=0'
    
    r = requests.get(url)
    
    html = r.text
    # 替换非字符为空,便于下面的正则
    html = re.sub('\s','',html)
    # 正则获取 板块及id所在区域
    labelHtml = re.findall(r'</span>主要行业\(新\)</a>(.*?)</span>证监会行业\(新\)',html)[0]
    # 正则板块和id,结果为由元组组成的列表
    label = re.findall(r'"qid="(hy.*?)"qquery=.*?"title="(.*?)">',labelHtml)
    # 转化为dataframe类型
    dfLabel = pd.DataFrame(label,columns=['id','板块'])
    
    # 根据板块id和翻页获取页面数据(json格式)
    def get_json(hy_id, page):
        query = 'PLATE_IDS:' + str(hy_id)
        params={
            'host': 'http://quotes.money.163.com/hs/service/diyrank.php',
            'page': page,
            'query': query,
            'fields': 'NO,SYMBOL,NAME,PRICE,PERCENT,UPDOWN,FIVE_MINUTE,OPEN,YESTCLOSE,HIGH,LOW,VOLUME,TURNOVER,HS,LB,WB,ZF,PE,MCAP,TCAP,MFSUM,MFRATIO.MFRATIO2,MFRATIO.MFRATIO10,SNAME,CODE,ANNOUNMT,UVSNEWS', #你可以不用这么多字段
            'sort': 'PERCENT',
            'order': 'desc',
            'count': '24',
            'type': 'query',
            }
        url = 'http://quotes.money.163.com/hs/service/diyrank.php?'
        r = requests.get(url,params=params)
        j = r.json()
        
        return j
    
    # 空列表用于存取每页数据
    dfs = []
    # 遍历全部板块
    for hy_id,板块 in dfLabel.values:
        # 获取页数
        j = get_json(hy_id, 0)
        pages = j['pagecount']
        
        for page in range(pages):
            j = get_json(hy_id, page)
            data = j['list']
            df = pd.DataFrame(data)
            df['板块'] = 板块
            dfs.append(df)
        print(f'已爬取{len(dfs)}个板块数据')
    
    result = pd.concat(dfs)     
    

    2. excel树状图

    excel树状图是在office2016级之后版本中新加的图表类型,想要绘制需要基于此版本及之后的版本哦。

    2.1. 简单的树状图

    简单的树状图绘制流程:框选数据—>插入—>图表—>选中树状图 即可。

    树状图绘制流程

    以下图为例,在树状图中,每个色块代表一个省份,色块面积大小则由其GDO值大小决定。

    2020年全国各地GDP

    2.2. 带有增长率的树状图

    我们发现,在基础的树状图中,色块颜色除了区别色块之外并没有其他特殊含义。拿GDP来说,除了值之外我们一般也会去看其增长率,那么是否可以让色块颜色和增长率有关联呢?

    下面我们试着探究一下,如果成功的话,那么金融界的大盘云图似乎也可以用excel树状图来进行绘制了不是!

    思路:

    1. 我们希望色块颜色能代表增长率,比如红色是上涨,绿色是下降且颜色越深代表绝对值越大
    2. 再对每个色块进行对应的颜色填充即可

    由于 树状图顶多支持多级,色块颜色也只能手动单一填充,怎么办呢?既然手动可以,那么其实就可以用VBA自动化这个过程咯。

    2.3.1. 增长率配色

    基于思路1,我们需要对增长率进行配色,最简单的就是用条件格式里的色阶

    框选增长率数据—>开始—>条件格式—>色阶(选中那个让值越大颜色越红的,由于这里有负增长率,所以选了带红绿的):

    色阶

    为了更好的展示区分正负增长率,我们在设置完色阶后再进行管理规则

    • 我们将中间值设为数字0,这样负增长率就是绿色,正增长率就是红色;
    • 我们将最大值设置为百分点值80,也就是增长率前80%的值都是最红的。

    调整规则

    最终配色效果:

    配色效果

    2.3.2. VBA填充色块颜色

    先看效果:

    湖北因为收到疫情影响最大,有接近小半年属于封省状态,全年增长率为负数。

    各省GDP及增长率

    由于条件格式下单元格颜色是不固定的无法通过vba获取,我们需要将颜色赋值到新的一列中去,需要用到如下操作:

    **选中增长率数据复制,然后点击剪切板最右下角会出现剪贴板,再鼠标左键选择需要粘贴的地方如E2,点击剪贴板中需要粘贴的数据即可。**这个时候,被粘贴的单元格区域的颜色就是固定的了,你可以选择删除数据只留颜色部分。

    单元格色复制操作流程

    VBA思路:

    激活需要操作的图表(Activate

    遍历全部的系列和数据点(ActiveChart.FullSeriesCollection(1).Points.Count

    从第一个数据点开始,获取对应增长率单元格颜色(ActiveSheet.Range("E" & i + 1).Interior.Color

    将单元格赋值给该数据点(Selection.Format.Fill.ForeColor.RGB

    VBA代码:

    Sub My_Color()
                
        ActiveSheet.ChartObjects("图表 1").Activate
        '遍历全部的数据点
        For i = 1 To ActiveChart.FullSeriesCollection(1).Points.Count
           '选中数据点
           ActiveChart.FullSeriesCollection(1).Points(i).Select
           '获取单元格颜色
           MyColor = ActiveSheet.Range("E" & i + 1).Interior.Color
           '将单元格颜色赋值给对应数据点填充色
           Selection.Format.Fill.ForeColor.RGB = MyColor
        Next
    
    End Sub
    

    执行脚本过程如下:

    好了,以上就是本次全部内容,大家可以试着爬取股票数据,然后试着绘制一下。

    温馨提示:接近小5000股票数据,vba填充色块颜色会卡死,不建议全选操作。

    公众号后台回复0228,可获取演示文件。
    在这里插入图片描述

    展开全文
  • https://www.cnblogs.com/luruiyuan/p/8567090.html
  • 使用树状图的话,eCharts提供的图形组件也有点不太适合,因此在同事建议下使用goJs制作树状图,效果如下。 过程分布: 导入package 初始化模板(初始化的过程好像必须放在ngOnInit()中,如果放在http请求的回调函数...
  • 在d3 中,绘制树状图,要用到层级布局这个概念: d3.hierarchy(data[, children]) 根据指定的层次结构数据构造一个根节点。指定的数据 data 必须为一个表示根节点的对象。比如: { "name": "Eve", "children": [ ...
  • 前言 本文的文字及图片来源于网络,仅供学习、交流...那么,今天我们试着用python爬取最近交易日的股票数据,并试着用excel简单绘制上面这个树状图。 爬取网易财经各板块股票数据 excel树状图 简单的树状图 带有增长率的
  • 使用R语言制作树状图

    2020-04-15 12:44:07
    用R语言画树状图要用到treemap 和readlx ,这两个包,可以在Rstudio中输入以下代码: ``` install.packages('treemap','readxl','gdata') ``` 在网上把疫情的数据获取到excel中,命名为hong.xls,并将其放在Rstudio...
  • I have implemented an algorithm to solve the problem of clustering in a graph. I used the python library "python-graph" to represent the graph. Now, at each step of my computation (the algorithm is it...
  • D3系列第五弹——绘制树状图

    千次阅读 2017-09-10 15:56:54
    温故而知新
  • 例如如下代码绘制中文节点: import matplotlib.pyplot as plt #定义决策节点和叶子节点的风格 decisionNode = dict(boxstyle = "sawtooth" ,fc= "0.8" ) #boxstyle = "swatooth"意思是注解框的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,964
精华内容 4,785
关键字:

如何绘制树状图