D3 绘制树图（tree）笔记

最新推荐文章于 2022-02-23 15:38:42 发布

wayne丶

最新推荐文章于 2022-02-23 15:38:42 发布

阅读量5.3k

点赞数

分类专栏： d3 文章标签： d3

本文链接：https://blog.csdn.net/qq_39408204/article/details/87882630

版权

d3 专栏收录该内容

4 篇文章 6 订阅

订阅专栏

绘制一个树形图分为四部

选中页面设置的svg绘制区域的宽高添加g元素设置位置
生成树状布局，设置尺寸
对角线生成器
请求数据
- 获取节点数组和连线数组
- 绘制连线
- 绘制节点
- 给节点添加圆圈设置半径
- 给节点添加文本设置文本样式位置

本地连接json会出现跨域问题需要用http-server启动本地服务器

打开cmd，安装：npm install http-server -g
cd到项目目录或者进入项目所在文件夹 shift+右键 “在此处打开命令窗口” 打开cmd
输入 hs -o 相当于http-server - open 默认端口为8080

具体原因自己恶补js基础

下面直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/d3.min.js" charset="utf-8"></script>
    <style>
        /* 圆圈 */
        .node circle{
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
        /* 文字 */
        .node  text{
            font-size: 15px;
            color: black;
        }
        /* path */
        .link{
            fill: none;
            stroke: black;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
    <script>
        var width = 700;
        var height = 700;
        //1选中页面设置的svg绘制区域的宽高 添加g元素 设置位置
        var svg = d3.select('body')
                .append('svg')
                .attr('width',width)
                .attr('height',height)
                .append('g')
                .attr('transform','translate(50,0)')
        //2 生成树状布局，设置尺寸
        var tree = d3.layout.tree()
                    .size([width,height-200])
        
        //3对角线生成器
        var diagonal = d3.svg.diagonal()
                    .projection(d=>[d.y,d.x])
        //4 请求数据
        d3.json("./json/flare.json", function(error, root) {
            //1 获取节点数组和连线数组
            var  nodes = tree.nodes(root)//获取所有节点信息
            var  links = tree.links(nodes)//获取节点的连线信息集合

            //2 生成连线
            var link = svg.selectAll('.link')
                    .data(links)
                    .enter()
                    .append('path')
                    .attr('class','link')
                    .attr('d',diagonal)

            // 3 生成节点
            var node = svg.selectAll('.node')
                    .data(nodes)
                    .enter()
                    .append('g')
                    .attr('class','node')
                    .attr('transform',function(d){
                        return "translate(" + d.y + "," + d.x + ")";
                    });

            // 4 给节点添加圆圈设置半径 
                node.append('circle')
                    .attr('r',4.5);
                    

            // 5 给节点添加文本 设置文本样式 位置
                node.append("text")
                    .attr("dx", function(d) { return d.children ? -15 : 15; })//定义文本显示x轴偏移量
                    .attr("dy", 10)//定义文本显示y轴偏移量
                    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })//文字对齐显示
                    .attr('class','text')
                    .text(function(d) { return d.name; });
            });
    </script>
</body>
</html>

JSON数据：


{
    "name":"中国",
    "children":
    [
        { 
          "name":"浙江" , 
            "children":
            [
                    {"name":"杭州" },
                    {"name":"宁波" },
                    {"name":"温州" },
                    {"name":"绍兴" }
            ] 
          },
          
        { 
            "name":"广西" , 
            "children":
            [
                {
                "name":"桂林",
                "children":
                [
                    {"name":"秀峰区"},
                    {"name":"叠彩区"},
                    {"name":"象山区"},
                    {"name":"七星区"}
                ]
                },
                {"name":"南宁"},
                {"name":"柳州"},
                {"name":"防城港"}
            ] 
        },
        
        { 
            "name":"黑龙江",
            "children":
            [
                {"name":"哈尔滨"},
                {"name":"齐齐哈尔"},
                {"name":"牡丹江"},
                {"name":"大庆"}
            ] 
        },
        
        { 
            "name":"新疆" , 
            "children":
            [
                {"name":"乌鲁木齐"},
                {"name":"克拉玛依"},
                {"name":"吐鲁番"},
                {"name":"哈密"}
            ]
        }
    ]
    }

在D3知识的海洋里一步一步的摸索，有没有大佬发下相关的好一点的教程，网上现在好多都是v3版的。感激不尽啊。

wayne丶

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
D3 绘制树图（tree）笔记

绘制一个树形图分为四部选中页面设置的svg绘制区域的宽高添加g元素设置位置生成树状布局，设置尺寸对角线生成器请求数据获取节点数组和连线数组绘制连线绘制节点给节点添加圆圈设置半径给节点添加文本设置文本样式位置本地连接json会出现跨域问题需要用http-server启动本地服...
复制链接

扫一扫