SVG实现树状图

已于 2024-08-26 14:25:33 修改
阅读量277 收藏 5
点赞数 1
分类专栏： svg 文章标签： 前端 javascript html
于 2024-06-12 14:41:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cwcgirl/article/details/139625976
版权

注：参考其他博主的案例http://t.csdnimg.cn/vZeEp＋自己整合

效果图

功能

根据数据自动渲染生成树状图

点击＋可以展开分支，点击 - 折叠分支，没有分支则不展示

可放大缩小并拖拽svg

 实现

父组件：app.vue

<div class="imgItem">
    <div style="font-size:14px;color: black;width: 50%;height:calc(100vh - 200px);user-select: none;">
        <svg :width="svgWidth" :height="svgHeight" v-if="loaded" @wheel="handleWheel" @mousedown="dragStart" @mouseup="dragEnd" @mousemove="drag">
            <g :style="{ transform: `scale(${zoomFactor})` }">
                <g :transform="`translate(${x}, ${y})`">

                    <line :x1="org.x + 100" :y1="org.y + 60" :x2="org.x + 100" :y2="org.y + 80" stroke="rgb(48, 170, 199)" stroke-width="6" fill="none" />

                    <foreignObject width="200" height="100" :x="org.x" :y="org.y">
                    <div style="background-color:rgb(48, 170, 199);color:#fff;text-align:center;height:60px;width:200px;border-radius: 15px;cursor:pointer;">
                        <p>{{ org.name }}</p>
                        <p>{{ org.value }}{{ org.unit }}</p>
                    </div>
                    </foreignObject>

                    <BLine v-for='(item, index) in org.children' :key='"line0_" + index' :x='org.x + 100' :y='org.y + 60' :x1='org.x + 100' :y1='org.y + 100' :x2='item.x + 100' :y2='org.y + 100' :x3='item.x + 100' :y3='item.y' v-if='org.expand'></BLine>

                    <Children v-for='(item, index) in org.children' :key='index' :org='item' v-if='org.expand' @toggle='toggle'></Children>

                </g>
            </g>

        </svg>
    </div>
</div>
import Children from './components/Children.vue'
import BLine from './components/BLine'
export default {
    components: { Children, BLine },
    data() {
        return {
            dragging: false,
            startX: 0,
            startY: 0,
            x: 0,
            y: 0,
            zoomFactor: 1, // 放大或缩小的比例

            loaded: false,
            org: {
                name: '总',
                value: 0,
                unit: 'kg',
                x: 0,
                y: 0,
                children: [
                    {
                        name: '一级1', id: 11,
                        x: 200, y: 50,
                        value: 0,
                        unit: 'kg',
                        children: [
                            {
                                name: '二级2', value: 0,
                                unit: 'kg',
                            },
                            {
                                name: '二级2', value: 0,
                                unit: 'kg',
                            },
                        ]
                    },
                    {
                        name: '一级2', id: 12,
                        x: 250, y: 50,
                        value: 0,
                        unit: 'kg',
                        children: [
                            {
                                name: '二级3',
                                children: [
                                    { name: '三级1' },
                                    { name: '三级2' },
                                    { name: '三级3' }
                                ]
                            },
                            { name: '二级4' },
                        ]
                    },
                    {
                        name: '一级3', id: 13,
                        x: 300, y: 50,
                        value: 0,
                        unit: 'kg',
                    },
                    {
                        name: '一级4', id: 13,
                        x: 300, y: 50,
                        value: 0,
                        unit: 'kg',
                    }
                ]
            },


            svgWidth: 1600, // SVG画布的宽度
            svgHeight: 700, // SVG画布的高度
            horItemNum: 0, // 横向最大节点数
            verItemNum: 0, // 显示的最大层数
            xTemp: {}, // 临时记录每层的最大x坐标，上层定位要用
            firstHeight: 150, // 第一层的高度（比较特殊）
            itemWidth: 200, // 元素的宽度
            itemHeight: 200, // 元素的高度
            gap: 50, //兄弟之间的间隔
            defaultExpandLevel: 0, // 从0开始
            broGap: 10, //表兄弟之间的间隔

        }
    },
    mounted() {
        this.setExpand(this.org, 0)
        this.genLocation()
        this.loaded = true
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        dragStart(event) {
            this.dragging = true;
            this.startX = event.clientX - this.x;
            this.startY = event.clientY - this.y;
        },
        dragEnd() {
            this.dragging = false;
        },
        drag(event) {
            if (this.dragging) {
                this.x = event.clientX - this.startX;
                this.y = event.clientY - this.startY;
            }
        },

        handleWheel(event) {
            // 阻止默认的滚轮行为
            event.preventDefault();

            // 检查滚轮的方向
            const delta = event.wheelDelta ? event.wheelDelta : -event.deltaY;

            if (delta > 0) {
                // 向上滚动，放大
                this.zoomFactor = this.zoomFactor + 0.1

            } else {
                // 向下滚动，缩小
                this.zoomFactor = this.zoomFactor - 0.1
            }
        },

        setExpand(item, level) {
            if (level <= this.defaultExpandLevel || item.expand) {
                item.expand = true
            } else {
                item.expand = false
            }

            if (item.children) {
                item.showDetail = true
            } else {
                item.showDetail = false
            }

            if (item.children) {
                item.children.forEach(element => {
                    this.setExpand(element, level + 1)
                });
            }
        },
        genLocation() {
            this.getChildrenLocation(this.org, 0)
            this.org.minx = 0
            this.org.x = (this.org.minx + parseInt(this.org.maxx) + this.itemWidth + this.gap) / 2 - 100
            console.log(this.org.minx, parseInt(this.org.maxx), this.itemWidth, this.gap);
            this.org.y = 0
            this.width = this.xTemp[this.verItemNum] + this.itemWidth + this.gap + 10
            this.height = this.itemHeight * (this.verItemNum) + 100
            console.log(this.org)
        },
        getChildrenLocation(item, level, index) {
            item.maxx = 0
            if (item.children && item.children.length > 0 && item.expand) {
                for (let i = 0; i < item.children.length; i++) {
                    item.children[i].minx = this.xTemp[level + 1] ? (this.xTemp[level + 1] + this.itemWidth + this.gap + this.broGap) : 0
                    this.getChildrenLocation(item.children[i], level + 1, i)
                    item.maxx = item.children[i].maxx
                    this.xTemp[level] = item.children[i].maxx
                }
                this.xTemp[level + 1] += this.broGap
                item.x = (item.minx + item.maxx) / 2
                if (level == 0) {
                    item.y = 0
                } else {
                    item.y = (level - 1) * this.itemHeight + this.firstHeight
                }
            } else {
                this.verItemNum = level > this.verItemNum ? level : this.verItemNum
                this.horItemNum++
                if (!this.xTemp[level]) {
                    this.xTemp[level] = 0.001
                    item.minx = 0
                } else {
                    this.xTemp[level] += this.itemWidth + this.gap
                    item.minx = this.xTemp[level]
                }
                if (!item.maxx || this.xTemp[level] > item.maxx) {
                    item.maxx = this.xTemp[level]
                }

                if (!this.xTemp[level + 1]) {
                    this.xTemp[level + 1] = 0.001
                } else {
                    this.xTemp[level + 1] += this.itemWidth + this.gap
                }
            }
            item.x = (item.minx + item.maxx) / 2
            item.y = (level - 1) * this.itemHeight + this.firstHeight
        },

        toggle(item) {
            this.loaded = false
            item.expand = !item.expand
            item.showDetail = !item.showDetail
            this.$nextTick(() => {
                this.horItemNum = 0
                this.verItemNum = 0
                this.xTemp = {}
                this.org.x = 0
                this.genLocation()
                this.loaded = true
            })

        },

    },
}
</script>
  • user-select: none; 禁止选中其中的文字
  • @wheel="handleWheel" 滚轮放大缩小svg的方法
  • :style="{ transform: `scale(${zoomFactor})`}" 滚轮放大缩小svg的样式
  • @mousedown="dragStart" @mouseup="dragEnd" @mousemove="drag" 鼠标拖拽svg的方法
  • :transform="`translate(${x}, ${y})`" 鼠标拖拽svg的样式

子组件：BLine.vue

<template>
    <svg width="5000" height="5000">
        <line :x1="x" :y1="y + 20" :x2="x1" :y2="y1" stroke="rgb(48, 170, 199)" stroke-width="6" fill="none" />
        <line :x1="x1" :y1="y1" :x2="x2" :y2="y2" stroke="rgb(48, 170, 199)" stroke-width="6" fill="none" />
        <line :x1="x2" :y1="y2" :x2="x3" :y2="y3" stroke="rgb(48, 170, 199)" stroke-width="6" fill="none" />
    </svg>
</template>
   
<script>
export default {
    name: 'BLine',
    props: {
        x: { type: Number, default: 0 },
        y: { type: Number, default: 0 },
        x1: { type: Number, default: 0 },
        y1: { type: Number, default: 0 },
        x2: { type: Number, default: 0 },
        y2: { type: Number, default: 0 },
        x3: { type: Number, default: 0 },
        y3: { type: Number, default: 0 },
    },
    data() {
        return {}
    },
}
</script>

子组件：Children.vue

<template>
    <svg width="5000" height="5000" style="font-size:14px;">
        <foreignObject :width="realWidth" :height="height" :x="org.x" :y="org.y">
            <div style="display:flex;flex-direction: column;">
                <div style="text-align:center;height:60px;width:200px;border:solid 3px rgb(48, 170, 199);color:#000;border-radius: 15px;">
                    <p>{{ org.name }}</p>
                    <p style="color: rgb(48, 170, 199);">{{ org.value }}{{ org.unit }}</p>
                </div>
                <div v-if='org.children'>
                    <div @click='toggle(org)' style="cursor: pointer;margin-left: 90px;line-height: 18px;text-align: center;width:20px;height:20px;background-color: rgb(23, 53, 53);border-radius: 50%;border: rgb(48, 170, 199) 1px solid;">
                        <span v-show="org.showDetail" style="color:rgb(48, 170, 199);font-weight:700;">{{ '➕' }} </span>
                        <span v-show="!org.showDetail" style="color:rgb(48, 170, 199);font-weight:700;">{{'➖'}} </span>
                    </div>
                </div>
            </div>
        </foreignObject>

        <BLine v-for='(item, index) in org.children' :key='"line_" + index' :x='org.x + 100' :y='org.y + 60' :x1='org.x + 100' :y1='org.y + 100' :x2='x2(item)' :y2='org.y + 100' :x3='x2(item)' :y3='item.y' v-if='org.expand'></BLine>

        <Children v-for='(item, index) in org.children' :key='index' :org='item' v-if='org.expand' @toggle='toggle'>
        </Children>
    </svg>
</template>
 
<script>
import BLine from './BLine'
export default {
    name: 'Children',
    components: { BLine },
    props: {
        org: { type: Object, required: true },
    },
    data() {
        return {
            width: 200,
            height: 100,
            realWidth: 200
        }
    },
    computed: {
        x2: function () {
            return (item) => {
                return item.x + this.width / 2
            }
        }
    },
    created() {
        this.realWidth = this.width
    },
    methods: {
        toggle(item) {
            this.$emit('toggle', item)
        }
    }
}
</script>

Cwcgirl
关注
专栏目录
svg 树状图_树状图(关系图)
weixin_29207439的博客
02-22 1278
树状图(竖着)d3.json("city.json", function (err, data) {const width = 700, height = 800, padding = {top: 60, left: 30};const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2).att...
svg 树状图_树状图一定要像树？试试更美的形态！
weixin_34053992的博客
01-10 1207
隔了一周，课代表又来上课啦～今天向大家介绍一种图表，族谱图。哦不，是树状图。树状图一般由几个大枝干，再细分为小枝干，一层一层分级。同学们看书会制作的思维导图也是一种树状图。比如前段时间我们把民法典的构成做成了一张思维导图，但本质它也是个树状图。上面的这种 S 型树状图，可以把要展示的信息清晰呈现，视觉阅读上也比较流畅。还有一种是环形树状图，这种树状图的好处是把内容更集中展现，展现更多的...
svg实现树状图
06-13
网络资源拿出来与大SVG是目前最火热的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，它是基于XML，由W3C联盟进行开发。SVG可以实现无损缩放，在性能上要比其它格式的图片更好家共享
展现树状结构的svg图片
08-10
展现树状结构的svg图片
基于SVG的树图Vue组件
xuwenzhi的专栏
09-14 815
项目需要，展示一个超大型交互树形组织结构图，找了很久没有合适的，而且大部分是类似菜单或者基于canvas的（如echarts），并不十分符合要求，遂用svg写了一个vue组件。效果如下 SVG的好处在于交互性，并且样式控制可以基于html css。 核心在于要根据树的数据结构计算节点的x、y坐标。 BLine.vue 用于两点间的贝塞尔曲线： <template> <svg width="5000" height="5000"> <path :.
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
最新发布
qq_72760247的博客
08-29 3645
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
svg 树状图_d3 树状布局tree
weixin_39683241的博客
02-11 943
树状布局Tree-Layout简介显而易见，树状布局就是我们通常所理解的数据结构中的树，由一个根节点向外展开，与前面力导向图的数据结构模型其实是一致的，只是展示形式略有差别，用树状结构展示看起来更加简洁清晰一点。API树结构d3.layout.tree()使用默认设置创建一个新的树状布局：tree.nodes(root)根据传入数据计算树的布局返回一组节点数组tree.links(nodes)根据...
java树状图demo
03-22
在Java编程领域，树状图是一种非常重要的数据结构，它以图形化的方式表示层次关系，广泛应用于文件系统、计算机科学的算法实现、网络拓扑结构等场景。在H5（HTML5）中，通过JavaScript库如D3.js、ECharts等，我们...
react-React组用于展示一个比赛树状图
08-15
为了实现树状图的交互功能，如点击节点显示详细信息或拖拽调整布局，我们可以添加事件监听器，并在组件内部维护状态来响应用户的操作。例如，添加点击事件： ```javascript onClick={(e) => this.handleTeamClick...
HTML5 SVG绘制大树.rar
07-10
HTML5 SVG绘制大树，这个例子的动画效果可以让你感觉到一棵大树的生长过程，树叶慢慢长出来，最后成了一棵茁壮的大树，这是使用的SVG技术，和Canvas相比，SVG似乎更强大。
SVG动态画树
04-02
SVG动态画树
一个可以通过拖放SVG图标来生成拥有树状结构的视图与数据的前端组件
08-10
一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件
svg 树状图 圆大小
czy279470138的博客
06-24 449
确定你的数据中有大小数字，请求数据中的number 不同，圆大小不同。 nodeEnter.append('circle') .attr('r', (d) => { return Math.min(30, Math.max(1 * d.number, 10)) }) .style('fill', '#3553F4') ...
go语言｜数据结构：二叉树可视化（制作svg格式树形图）
汉阳Hann's Home
09-04 2897
SVG是可伸缩矢量图形 (Scalable Vector Graphics)，于2003年1月14日成为 W3C 推荐标准。SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体矩形 ......
go语言｜数据结构：二叉树可视化（svg树形图改进版）
汉阳Hann's Home
09-17 1837
增加一个结构biTreeInfo，在遍历二叉树时把作图要用的信息存入此结构中，方便读取信息。TreeInfo()写入二叉树结点信息，其中DataLevel是层序遍历的结果，也可以用它来作图；Info2XML()就是把上述方法所得信息，转化成SVG的xml代码；ShowSVG()生成并显示图形......
vue 做一个树图
学习使我快乐_玉祥
09-12 2028
{"path":"/快速访问","name":"快速访问",},]通过child无线嵌套。
vue d3 svg tree树状图
czy279470138的博客
03-22 4195
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
svg折纸样式树js特效
ICode联盟
10-25 109
svg折纸样式树特效动画，使用css3+svg绘制绿色节状树木3D动画，多边形大树旋转动画特效。
uniapp小程序实现无限层级的树形数据结构
qq_45750213的博客
08-16 2145
在uniapp中由于没有封装好的树形组件，只能自己纯手写实现。树形结构是无限层级的，所以想到了递归，使用组件循环技术实现。
D3树状图异步按需加载数据
05-13
D3树状图异步按需加载数据可以通过以下步骤实现： 1. 定义根节点，根节点是整个树结构的入口。 2. 定义一个函数，用于异步加载子节点的数据。这个函数需要接收一个节点作为参数，然后返回一个Promise对象，用于异步加载子节点的数据。 3. 定义一个函数来更新树状图。这个函数需要接收一个根节点作为参数，并且需要使用根节点的数据来绘制树状图。 4. 当用户点击节点时，调用异步加载子节点数据的函数，并在Promise对象被解决之后，更新树状图。 下面是一个示例代码： ``` // 定义根节点 const root = d3.hierarchy(data); // 定义异步加载子节点的函数 const loadChildren = async (node) => { const childrenData = await fetch(`http://example.com/api/children?node=${node.id}`); return childrenData.map(childData => d3.hierarchy(childData)); }; // 定义更新树状图的函数 const update = (root) => { // 绘制树状图的代码 }; // 当用户点击节点时，调用异步加载子节点数据的函数，并在Promise对象被解决之后，更新树状图 d3.select('svg') .on('click', (event, d) => { if (d.children) { d.children = null; } else { loadChildren(d).then(children => { d.children = children; update(root); }); } }); ``` 在这个示例代码中，当用户点击节点时，会调用`loadChildren`函数异步加载子节点数据。在Promise对象被解决之后，会更新树状图。注意，`loadChildren`函数返回的数据需要先转换为`d3.hierarchy`对象，才能作为子节点添加到树状图中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值