在vue中使用d3做一个动态加载的树形图

最新推荐文章于 2024-08-21 08:23:06 发布
最新推荐文章于 2024-08-21 08:23:06 发布
阅读量2.3k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： d3 树形图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KingJordon/article/details/107950328
版权

树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上

本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370

注意：本demo用的d3版本是v3，用最新版有些功能无法使用

    <script src="https://d3js.org/d3.v3.min.js"></script>

效果图

<template>
    <div class="main" style="margin-top: 10px">
        <el-card>
            <el-row>
                <el-col :span="6">
                <el-col :span="16">
                    <el-input v-model="condition" size="small" placeholder="搜索用户名" />
                </el-col>
                <el-col :span="2" :offset="2">
                    <el-button type="primary" size="small" @click="searchList">搜索</el-button>
                </el-col>
                </el-col>
                
            </el-row>
        </el-card>
        <div class="chartTooltip hidden">
            <p>
                <strong class="name"></strong>
            </p>
        </div>
        <div class="tree" id="tree"></div>
    </div>

</template>

<script>
import OyUserApi from '@/api/systemManage/oyUserApi'
import Axios from '@/interceptor/HttpInterceptor'
var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });
    export default {
        name:'d3',
        components:{

        },
        data() {
            return {
                condition:'',
                root: {},
                tree:null,
                duration: 700,
                treeData: '',
                count:0,
                zm:null,
                separation: () => 1,
            }
        },
        created () {
            this.getData()
        },
        mounted() {
            const that= this
            var width = document.getElementById("tree").offsetWidth;
            var height = document.getElementById("tree").offsetHeight;
            that.height=height
            that.width=width
            var tree = d3.layout.tree().size([height, width])
            that.tree=tree
        },
        
        methods:{
            searchList(){
                const that =this
                const params = {
                    condition:that.condition,
                    layer:1
                }
                if(that.condition==''){
                    this.$message.error("请输入用户名！")
                    return
                }
                const http = new OyUserApi()
                http.getMemberProfile(params).then(res => {
                    if (res.code === 200) {
                        that.root=res.data
                        that.update(that.root)
                    }else{
                        this.$message.error("用户不存在！")
                    }
                })
            },
            getData(){
                const that =this
                const params = {
                    id:1,
                    layer:1
                }
                const http = new OyUserApi()
                http.getSubMemberProfile(params).then(res => {
                    if (res.code === 200) {
                        that.root=res.data
                        that.DrawTree()
                    }
                })
               
            },
            DrawTree() {
                const that =this 
				var svg = d3.select("body").select("#tree").append("svg").attr("width", 1560).attr("height", 800)
					.call(that.zm=d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", d=>{svg.attr("transform",
						"translate(" + d3.event.translate + ")" +
						"scale(" + d3.event.scale + ")"
					);})) //给svg绑定zoom事件
					.append("g")
                    .attr("transform", "translate(150, 0)")
                that.zm.translate([150, 0])
                that.svg=svg    
				// 根节点和位置
				that.root.x0 = that.height / 2;
                that.root.y0 = 0;
                //(1) 折叠函数，递归调用,有子孙的就把children（显示）给_children（不显示）暂存，便于折叠，
                function collapse(d) {
                    if (d.children) {
                        d._children = d.children;
                        d._children.forEach(collapse);
                        d.children = null;
                    }
                }
				// 折叠根节点的每个孩子
				that.root.children.forEach(collapse);
                // 折叠之后要重绘
				this.update(that.root);
            },
            //(2) 更新布局
            update(source) { 
                const that =this
                // (2-1) 计算新树的布局
                var nodes = that.tree.nodes(that.root).reverse(),
                    links = that.tree.links(nodes);
                // (2-2) 树的深度这里树d.y。树的宽度最大720，要分四层，所以每层就乘180
                nodes.forEach(function(d) {
                    d.y = d.depth * 180; 
                });
                // (2-3) 数据连接，根据id绑定数据
                var node = that.svg.selectAll("g.node")
                .data(nodes, function(d) { return d.id || (d.id = ++that.count); });
                var div = d3.select('.chartTooltip').style("opacity", 0)
                var timer = null;
                var nodeEnter = node.enter().append("g")
                    .attr("class", "node")
                    .style("cursor", "pointer")
                    .attr("transform", function(d) {
                        return "translate(" + source.y0 + "," + source.x0 + ")";
                    })
                    .on("mouseover", d => {
                        if (timer) clearTimeout(timer)
                        d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
                        // 从d3.event获取鼠标的位置
                        var transform = d3.event;
                        var yPosition = transform.layerY + 40;
                        var xPosition = transform.layerX + 40;
                        // 将浮层位置设置为鼠标位置
                        var chartTooltip = d3
                            .select(".chartTooltip")
                            .style("left", xPosition + "px")
                            .style("top", yPosition + "px");
                        // 更新浮层内容
                        chartTooltip.select(".name").html('用户名：'+d.name+'<br>'+'手机号：'+d.telephone);
                        // 移除浮层hidden样式，展示浮层
                        chartTooltip.classed("hidden", false);
                    })
                    // 添加mouseover事件
                    .on("mouseout", () => {
                        // 添加浮层hidden样式，隐藏浮层
                        timer = setTimeout(function() {
                            d3.select('.chartTooltip').style('opacity', 0).style('display', 'none')
                        }, 400);
                    })
                    .on("click", d => that.click(d));
                d3.select('.chartTooltip').on('mouseover', function() {
                    if (timer) clearTimeout(timer)
                    d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
                }).on('mouseout', function() {
                    timer = setTimeout(function() {
                        d3.select('.chartTooltip').style('opacity', 0).style('display', 'none')
                    }, 400);
                })
                // 原点
                nodeEnter.append("circle")
                    .attr("r", 1e-6)
                    .style("fill", function(d) {
                        return d. hasChildren? "#f00" : "#BEBEBE";
                    });

                //文字 1
                nodeEnter.append("text")
                    .attr("x", function(d) {
                        return d.children || d._children ? 10 : 10;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", function(d) {
                        // return d.children || d._children ? "end" : "start";
                        return "start";
                    })
                    .text(function(d) {
                        return d.name;
                    })
                    .style("fill-opacity", 1)
                    .style("font-size", "12px");
                // (2-5) 原有节点更新到新位置
                var nodeUpdate = node.transition()
                    .duration(that.duration)
                    .attr("transform", function(d) {
                        return "translate(" + d.y + "," + d.x + ")";
                    });
                nodeUpdate.select("circle")
                    .attr("r", 4.5)
                    .attr("r", function(d) {
                        return d._children ? "5" : "5";
                    })
                    .style("fill", function(d) {
                        return d. hasChildren? "#f00" : "#BEBEBE";
                    });
                nodeUpdate.select("text")
                    .style("fill-opacity", 1);

                // (2-6) 折叠节点的子节点收缩回来
                var nodeExit = node.exit().transition()
                    .duration(that.duration)
                    .attr("transform", function(d) {
                        return "translate(" + source.y + "," + source.x + ")";
                    })
                    .remove();
                nodeExit.select("circle")
                    .attr("r", 1e-6);
                nodeExit.select("text")
                    .style("fill-opacity", 1);

                // (2-7) 数据连接，根据目标节点的id绑定数据
                var link = that.svg.selectAll("path.link").data(links, function(d) {
                        return d.target.id;
                    });
                
                // (2-8) 增加新连接
                link.enter().insert("svg:path", "g")
                .attr("class", "link")
                .attr("fill", "none")
                .attr("stroke", "#ccc")
                .attr("stroke-width", "2")
                .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
                });
                // (2-9) 原有连接更新位置
            
                link.transition()
                    .duration(that.duration)
                    .attr("d",diagonal);
                // (2-10) 折叠的链接，收缩到源节点处
                link.exit().transition()
                    .duration(that.duration)
                    .attr("d", function(d) {
                        var o = {
                            x: source.x,
                            y: source.y
                        };
                        return diagonal({ source: o,target: o });
                    })
                    .remove();
                // 把旧位置存下来，用以过渡
                nodes.forEach(function(d) {
                    d.x0 = d.x;
                    d.y0 = d.y;
                });
                
            },
            // (3) 切换折叠与否
            async click(d) {
                const that =this
                if (d.children) {
                    d._children = d.children;
                    d.children = null; 

                } else if(d._children&&d._children.length!=0){     
                    d.children = d._children;
                    d._children = null;
                }else if(d.hasChildren){
                    var mnodes = await  that.getNode(d);   
                }
                if(d.hasChildren){
                    that.update(d);
                }
                // 点击节点 以当前节点位置居中
                const a = that.zm.scale()
                that.svg.attr('transform', 'translate(' + (that.width / 3 - d.y0 * a) + ', ' + (that.height / 2 - d.x0 * a) + ') scale(' + a +
                    ')')
                that.zm.translate([(that.width / 3 - d.y0 * a), (that.height / 2 - d.x0 * a)]).scale(a)
            },
             getNode (d) { 
                const that =this
                const http = new OyUserApi()
                const params={
                    'id':d.id,
                    'layer':1
                }
                // #自定义的一个新的以同步方式从后台取数据的请求函数
                http.getSubMemberProfile(params).then(res => {
                    if (res.code === 200) {
                        d.children =  res.data.children; 
                        d._children = null; 
                        that.update(d);
                    }
                })
            },


        }
    }
</script>

<style  scoped>

    .main{
       width: 100%;
        height: 99%;
        overflow: auto; 
    }
    .tree{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
   .node {
        cursor: pointer;
    }

        .node circle {
        fill: none;
        stroke: #fff;
        stroke-width: 1.5px;
    }

        .node text {
        font: 10px sans-serif;
    }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }

        .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }

    #tree {
        height: 100%;
        margin: 0 auto;
        /* background: #E0E0E0; */
        box-sizing: border-box;
    }

    #tree svg{
        width: 100%;
        height: 100%;
        
    }
    .chartTooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
        background-color: white;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);

    }

    .chartTooltip.hidden {
        display: none;
    }
    .chartTooltip p {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        word-wrap: break-word;
    }
</style>

 

 

 

console.log( )
关注
专栏目录
vue+d3实现横向树状图（节点使用矩形图展示信息）
qq_42241946的博客
05-10 3898
项目步骤如下标注： <template> <div class="history" ref="history" style="height: 99%"> <history-view-title :title="history_view_title"></history-view-title> <main class="container"> <div id="myInput"> &l.
vue.js中使用D3树状图异步按需加载数据绘制人物关系图
weixin_33701251的博客
01-24 2235
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue-D3-Network 开源项目教程
gitblog_00943的博客
08-08 303
Vue-D3-Network 开源项目教程 vue-d3-networkVue component to graph networks using d3-force项目地址:https://gitcode.com/gh_mirrors/vu/vue-d3-network 1. 项目目录结构及介绍 Vue-D3-Network 是一个基于 Vue.js 和 D3.js 的组件库，用于创建交互式的网...
vue d3 svg tree树状图
czy279470138的博客
03-22 4192
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：[{名称：“ son1”，子代：[{名称：“孙子“}，{name：” grandson2“}]}，{nam
基于D3js布局显示树的Vue组件
08-08
基于D3.js布局显示树的Vue组件
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
cuk5239的博客
07-25 1259
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based on D3.js layout. 更新documentationVue组件以显示基于D3.js布局的图形。 树 (Tree) 用法 (Usage) <tree :data="tre...
vue自定义树状结构图的实现方法
01-18
vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态，把组件内容使用input、select等组件替换 数据结构 treeData: [{ name: '1', child: [ { name: '2', child: [{ name: '1' }, { ...
知识图谱可视化，前端 vue.js + d3.js.zip
04-03
Vue组件可以封装D3.js的图形生成逻辑，使得在Vue应用中使用D3变得简单。在实际项目中，通常会在Vue组件的`mounted()`生命周期钩子中初始化D3的图形，并在`updated()`或响应式属性变化时更新图形。这样，当数据发生...
vue d3.js 树形图
06-02
在组件的 mounted 钩子函数中，可以使用 D3.js 创建树形图。 具体实现步骤如下： 1. 在 Vue 组件中引入 D3.js 库 ```javascript import * as d3 from 'd3'; ``` 2. 在 mounted 钩子函数中创建树形图 ```...
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1174
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
d3tree树控件，点击动态加载，默认展开三层
qq_38687592的博客
07-09 751
// 5 给节点添加文本 设置文本样式 位置 nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em")
探索Vue.D3.tree：构建动态数据可视化的新工具
gitblog_00036的博客
04-11 410
探索Vue.D3.tree：构建动态数据可视化的新工具 Vue.D3.treeVue component to display tree based on D3.js layout.项目地址:https://gitcode.com/gh_mirrors/vu/Vue.D3.tree 是一个强大的开源项目，它将流行的前端框架Vue.js与数据可视化库D3.js结合，提供了创建交互式树状图的强大功能...
Vue3使用echarts树图（tree）
Mr Dear的博客
04-19 5641
Vue3+TS使用echarts树图
Vue3 组合式实现 带连接线的Tree型 架构图（一级树形图）
编码行者的博客
12-04 1588
【代码】Vue3 组合式实现 带连接线的Tree型 架构图（一级树形图）
D3.js树图tree 组织机构分布图(基于vue)
qq_38192105的博客
10-26 7255
@[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景 前段时间接到一个需求，仿照企业查查->企业族谱 使用d3画出企业关系树图。这也是本人第一次接触d3.js，总体来说就是对数据进行操作，具体可自行网上学习，还需要具有一定svg基础。 开发中遇到的主要问题就是对各节点位置的设置，因为根节点是左右进行扩散，那针对左右两部分的根就要根据根节点所占长度进行调整，具体实现可见代码： 还有一点需要说明下，d3.js的各版本并非全面向下兼容，之前网上找的一些案例，本地运行时一直报各种错误，排
Vue.D3.tree 开源项目教程
最新发布
gitblog_00216的博客
08-21 525
Vue.D3.tree 开源项目教程 Vue.D3.treeVue component to display tree based on D3.js layout.项目地址:https://gitcode.com/gh_mirrors/vu/Vue.D3.tree 项目介绍 Vue.D3.tree 是一个基于 Vue.js 和 D3.js 的开源项目，旨在提供一个灵活且强大的树形图组件。它允许开...
dagre-d3画树形拓扑图(包含分组)、流程图
qq_40588529的博客
05-31 1212
使用.translateExtent指定[[x0, y0], [x1, y1]]限制用户平移的范围。// 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'// ranker: "network-simplex",//连线算法。// ranksep: 100, // 层与层之间的间距。// new dagreD3.render()创建渲染器。// compound:true为分组必须配置！// nodesep: 70, // 节点之间间距。// ②创建 graph 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值