vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略

目录

引言

一、设计

1. 树状图(不方便呈现节点之间的关系,次要考虑)

2. 力引导依赖关系图

二、力引导关系图

三、如何实现节点的Open Or Fold

1. 设计逻辑

节点展开细节

节点收缩细节

代码实现

四、结果呈现

五、完整代码


引言

我考虑到如何实现关系图的缩放,但是关系图并不是简单的一个树结构,关系会存在于各个节点之间,两个同一层级之间的节点之间也会有一定的关系。

那么如何实现节点之间的折叠和展开策略,成为了这个图设计的关键要素。

一、设计

1. 树状图(不方便呈现节点之间的关系,次要考虑)

2. 力引导依赖关系图

    引力中心为图片中心(考虑到尽可能多的呈现信息,所以引力中心设置为中心)

    层级设计:重量按照由中心向四周分布,层级权重也是如此分布。

二、力引导关系图

"力引导关系图"通常指的是一种可视化方法,用于展示图形中节点之间的关系和连接。这种图形通常采用力导向布局算法,其中节点之间的吸引力和排斥力被用来模拟真实世界中的物理力,以确定节点在图中的相对位置。

  1. 节点(Nodes): 表示图中的个体、对象或数据点。每个节点通常代表一个实体,如人物、城市、概念等。

  2. 边(Edges): 表示节点之间的连接或关系。边可以是有向的或无向的,具体取决于关系的性质。

  3. 力导向布局算法: 使用物理模型来模拟节点之间的力的作用,以确定节点的位置。这些力包括吸引力(使相连接的节点靠近)和排斥力(使不相连接的节点远离)。这种算法通过模拟物理系统中的粒子之间的相互作用来达到节点布局的目的。

  4. 布局: 节点根据力导向算法的计算结果被放置在图形中的特定位置,以便更好地展示节点之间的关系。

  5. 可视化: 力引导关系图提供了一种直观的方式来理解图中节点的关系,使得那些有关联的节点更接近,而没有关联的节点相对较远。这有助于发现图中的模式、集群或其他重要信息。

这种图形在许多领域中都有应用,例如社交网络分析、生物信息学、知识图谱可视化等。

三、如何实现节点的Open Or Fold

echarts3之后的关系图节点的书写按照以下规则:

var myChart = echarts.init(document.getElementById('main'), 'macarons');            // 指定图表的配置项和数据var option = {tooltip : {show : true,   //默认显示showContent:true, //是否显示提示框浮层trigger:'item',//触发类型,默认数据项触发triggerOn:'click',//提示触发条件,mousemove鼠标移至触发,还有click点击触发alwaysShowContent:false, //默认离开提示框区域隐藏,true为一直显示showDelay:0,//浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。hideDelay:200,//浮层隐藏的延迟,单位为 ms,在 alwaysShowContent 为 true 的时候无效。enterable:false,//鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。position:'right',//提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。confine:false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。transitionDuration:0.4,//提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。formatter: function (params, ticket, callback) {//判断数据,提供相应的url。var path="";var node=params.data; //当前选中节点数据var category=params.data.category;  //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名 if(category==2){ //为jvm 虚拟机各类参数的路径path = "${ctx}/weblogic.do?host=" + node.host + "&port="+ node.port + "&username=" + node.username+ "&pwd=" + node.pwd; //准备访问路径}else if(category==4){ //为jdbc 数据库的路径path = "${ctx}/oracle.do?host=" + node.host + "&port="+ node.port + "&username=" + node.username+ "&pwd=" + node.pwd + "&instance="+ node.instance; //准备访问路径}console.log(params);$.ajax({async : true,//设置异、同步加载cache : false,//false就不会从浏览器缓存中加载请求信息了type : 'post',dataType : "json",url : path,//请求的action路径  success : function(data) { //请求成功后处理函数。    //加工返回后的数据debugger;if(category==2){ //当选择端口号时var res = 'jvm最大内存值:' + data.memoryMaxSize+'<br/>';res+='jvm空闲内存值:'+data.memoryFreeSize+'<br/>';res+='jvm内存使用率:'+data.memoryPer+'<br/>';res+='空闲线程:'+data.ideThread+'<br/>';res+='总线程:'+data.totalThread+'<br/>';res+='每秒处理的线程数比率:'+data.throuhput+'<br/>';callback(ticket,res);}else if(category==4){//当选择用户名时var res = '当前链接数:'+data.processCount+'<br/>';res+='最大链接数:'+data.maxProcessCount+'<br/>';callback(ticket,res);}},error : function() {//请求失败处理函数  $.messager.alert('警告', '请求失败!', 'warning');}});if(category==2||category==4){ //当选择端口号与用户名时提示加载return "loading";}else{                   //其他情况显示所属图例以及名称return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;}}},legend : { //=========圖表控件show : true,data : [ {name : '负载',icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'},{name : '中间件',icon : 'roundRect'}, {name : '端口号',icon : 'circle'}, {name : '数据库',icon : 'circle'},{name : '用户名',icon : 'roundRect'} ]},series : [ {type : 'graph', //关系图name : "监控管理系统", //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。layout : 'force', //图的布局,类型为力导图,'circular' 采用环形布局,见示例 Les MiserableslegendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。hoverAnimation : true,//是否开启鼠标悬停节点的显示动画coordinateSystem : null,//坐标系可选xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项yAxisIndex : 0, //y轴坐标 force : { //力引导图基本配置//initLayout: ,//力引导的初始化布局,默认使用xy轴的标点repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。edgeLength :80,//边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长layoutAnimation : true//因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。                        },roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放draggable : true,//节点是否可拖拽,只在使用力引导布局的时候有用。focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。//symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'(矩形), 'roundRect'(圆角矩形), 'triangle'(三角形), 'diamond'(菱形), 'pin'(大头针), 'arrow'(箭头)  也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿//symbolSize:10 ,//也可以用数组分开表示宽和高,例如 [20, 10] 如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:(value: Array|number, params: Object) => number|Array//symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。//symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']edgeSymbol : [ 'none', 'none' ],//边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:edgeSymbol: ['circle', 'arrow']edgeSymbolSize : 10,//边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。itemStyle : {//===============图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。normal : { //默认样式label : {show : true},borderType : 'solid', //图形描边类型,默认为实线,支持 'solid'(实线), 'dashed'(虚线), 'dotted'(点线)。borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4borderWidth : 2, //图形的描边线宽。为 0 时无描边。opacity : 1// 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5},emphasis : {//高亮状态}},lineStyle : { //==========关系边的公用线条样式。normal : {color : 'rgba(255,0,255,0.4)',width : '3',type : 'dotted', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)curveness : 0.3, //线条的曲线程度,从0到1opacity : 1// 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5},emphasis : {//高亮状态}},label : { //=============图形上的文本标签normal : {show : true,//是否显示标签。position : 'inside',//标签的位置。['50%', '50%'] [x,y]textStyle : { //标签的字体样式color : '#cde6c7', //字体颜色fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...fontFamily : 'sans-serif', //文字的字体系列fontSize : 12, //字体大小}},emphasis : {//高亮状态}},edgeLabel : {//==============线条的边缘标签 normal : {show : false},emphasis : {//高亮状态}},//别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小//label:标签样式。data : [ {id : 0,category : 0,name : '101.133.8.88',symbol : 'roundRect',value : 20,symbolSize : 80}, {id : 1,category : 1,name : '192.168.8.88',symbol : 'rect',value : 20,symbolSize : 70}, {id : 2,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60,yId:"jvm",host:"192.168.6.37",port:"7001",username:"weblogic",pwd:"weblogic1"}, {id : 3,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 4,category : 1,name : '102.12.33.23',symbol : 'rect',value : 20,symbolSize : 70}, {id : 5,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 6,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 7,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 8,category : 1,name : '101.11.66.6',symbol : 'rect',value : 20,symbolSize : 70}, {id : 9,category : 2,name : '7101',symbol : 'circle',value : 20,symbolSize : 60}, {id : 10,category : 2,name : '7101',symbol : 'circle',value : 20,symbolSize : 60}, {id : 11,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 12,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 13,category : 3,name : '192.168.44.44',symbol : 'circle',value : 20,symbolSize : 70}, {id : 14,category : 3,name : '192.168.33.33',symbol : 'circle',value : 20,symbolSize : 70}, {id : 15,category : 3,name : '192.168.22.22',symbol : 'circle',value : 20,symbolSize : 70}, {id : 16,category : 4,name : '55555555555',symbol : 'circle',value : 20,symbolSize : 70,yId:"jdbc",port:"1521",host:"192.168.11.11",username:"222222222",pwd:"11111111",instance:"orcl"}],categories : [ //symbol name:用于和 legend 对应以及格式化 tooltip 的内容。 label有效{name : '负载',symbol : 'rect',label : { //标签样式}}, {name : '中间件',symbol : 'rect'}, {name : '端口号',symbol : 'roundRect'}, {name : '数据库',symbol : 'roundRect'}, {name : '用户名',symbol : 'roundRect'} ],links : [ //edges是其别名代表节点间的关系数据。{source : 1,target : 0}, {source : 4,target : 0}, {source : 8,target : 0}, {source : 2,target : 1}, {source : 3,target : 1}, {source : 5,target : 4}, {source : 6,target : 4}, {source : 7,target : 4}, {source : 9,target : 8}, {source : 10,target : 8}, {source : 11,target : 8}, {source : 12,target : 8}, {source : 13,target : 6}, {source : 14,target : 6}, {source : 15,target : 2}, {source : 16,target : 15} ]} ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/*ECharts3 方法部分 开始*/function openOrFold(params) {  //该事件会提示节点间关系...}//var ecConfig = echarts.config; echarts2的获取事件方法,当前为echarts3myChart.on('mouseover', openOrFold);//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' /*ECharts3 方法部分 结束*//*ECharts3 结束*/

那么如何实现鼠标点击或者悬停实现节点的折叠和展开呢?

1. 设计逻辑

节点展开细节

需求逐级展开,每次展开节点周围一层的节点,并且绘制出已存在节点的关系。

节点收缩细节

需求逐层收缩,每次收缩周围一层的节点,并且取消消失节点之间的关系。

为了保持思维流畅性(用户友好性),在收缩的时候采取,收缩当前节点的子节点,并且收缩上一层节点的孤立点,下一层的并不实现收缩。

代码实现

openOrFold(param) {var option = this.myChart1.getOption();var nodesOption = option.series[0].data;var linksOption = option.series[0].edges;var data = param.data;var linksNodes = [];if (data != null && data != undefined) {if (data.flag) {var tempNodes = [];// 如果节点已经展开,将其所有的关联节点隐藏for (let m in linksOption) {// 找上下“已经显示的孤立的”层节点隐藏if (linksOption[m].target == data.id &&nodesOption[linksOption[m].source].category >= 0 &&!nodesOption[linksOption[m].source].flag) {// 找下层// tempNodes.push(nodesOption[linksOption[m].source])linksNodes.push(linksOption[m].source);} else if (linksOption[m].source == data.id &&nodesOption[linksOption[m].target].category >= 0 &&!nodesOption[linksOption[m].target].flag) {// 找上层tempNodes.push(nodesOption[linksOption[m].target])linksNodes.push(linksOption[m].target);}}// 找孤立点var temp = [];for(let i in linksOption){for(let j in tempNodes){if(linksOption[i].target == tempNodes[j].id&& nodesOption[linksOption[i].source].category>=0 && linksOption[i].source != data.id){// console.log(linksOption[i])temp.push(linksOption[i].target)}else if(linksOption[i].source == tempNodes[j].id&& nodesOption[linksOption[i].target].category>=0 && linksOption[i].target != data.id){temp.push(linksOption[i].source)}}}var  uniqueTemp = [...new Set(temp)]var elementsSet = new Set(uniqueTemp)linksNodes = linksNodes.filter(item=>!elementsSet.has(item))// 将上下层节点的隐藏设置if (linksNodes != null && linksNodes != undefined) {for (let k in linksNodes) {nodesOption[linksNodes[k]].category =nodesOption[linksNodes[k]].category * -1;}nodesOption[data.id].flag = false;}} else {// 如果节点未展开,将其所有的关联节点打开for (let m in linksOption) {// 找上下“未显示的”层节点if (linksOption[m].target == data.id &&nodesOption[linksOption[m].source].category < 0) {// 找下层linksNodes.push(linksOption[m].source);} else if (linksOption[m].source == data.id &&nodesOption[linksOption[m].target].category < 0) {// 找上层linksNodes.push(linksOption[m].target);}}// 将上下层节点的显示设置if (linksNodes != null && linksNodes != undefined) {for (let k in linksNodes) {nodesOption[linksNodes[k]].category =nodesOption[linksNodes[k]].category * -1;}nodesOption[data.id].flag = true;}}// option.series[0].data = linksNodes;this.myChart1.setOption(option);}},

按照这个逻辑则可以画出如下所示视频中的节点折叠和展开。

四、结果呈现

FlodOrOPen

五、完整代码

一页完整的vue代码,DemoView.vue

数据来源:https://echarts.apache.org/examples/data/asset/data/webkit-dep.json

<template><div class="connection"><div id="chart1" style="width: 90vw; height: 90vh"></div></div>
</template><script>
export default {data() {return {myChart1: null,webkitDep: {}};},methods: {init() {var webkitDep = this.webkitDep;this.myChart1 = this.$echarts.init(document.getElementById("chart1"));var option = {legend: {data: ["Spine", "Switch", "Node"],},tooltip:{formatter: (params) =>{var chartData = params.data;if(params.dataType == "node"){var htmlContent = `<div style='min-width: 310px;background: #fff; padding: 10px 5px;color: #999;font-weight: 900;'><div style='font-size: 14px;margin-bottom: 10px;'>${"基本信息"}</div><div style='font-size: 12px;line-height: 24px;'><div style="width: 100%;"><span style='display: inline-block;width: 80px;text-align: right;padding-right: 10px;'>${"名称:"}</span><span style='display: inline-block;width: 180px;color: #000;'>${chartData.name}</span></div><div style="width: 100%;"><span style='display: inline-block;width: 80px;text-align: right;padding-right: 10px;'>${"状态:"}</span><span style='display: inline-block;width: 10px;height: 10px;text-align: center;background: red;border-radius: 50%;'></span><span style='display: inline-block;width: 180px;color: #000;'>${chartData.state}</span></div><div style="width: 100%;"><span style='display: inline-block;width: 80px;text-align: right;padding-right: 10px;'>${"IP地址:"}</span><span style='display: inline-block;width: 180px;color: #000;'>${chartData.ip}</span></div></div><div class="btn-tooltip" style='width: 100%; text-align: right;padding-right: 10px;color: #1e9fff; cursor: pointer;' onclick="chartClick">详情>></div></div>`}else if(params.dataType == "edge"){}return htmlContent}},series: [{type: "graph",layout: "force",animation: false,label: {show: false ,position: "right",formatter: "{b}",},draggable: true,roam: true,data: webkitDep.nodes.map(function (node, idx) {node.id = idx;return node;}),categories: webkitDep.categories,force: {// edgeLength: [50,100],repulsion: 500,gravity: 0,},edges: webkitDep.links,emphasis: {focus: "adjacency",label: {position: "right",show: true,},},},],};this.myChart1.setOption(option);this.myChart1.on("click", this.openOrFold);},openOrFold(param) {var option = this.myChart1.getOption();var nodesOption = option.series[0].data;var linksOption = option.series[0].edges;var data = param.data;var linksNodes = [];if (data != null && data != undefined) {if (data.flag) {var tempNodes = [];// 如果节点已经展开,将其所有的关联节点隐藏for (let m in linksOption) {// 找上下“已经显示的孤立的”层节点隐藏if (linksOption[m].target == data.id &&nodesOption[linksOption[m].source].category >= 0 &&!nodesOption[linksOption[m].source].flag) {// 找下层// tempNodes.push(nodesOption[linksOption[m].source])linksNodes.push(linksOption[m].source);} else if (linksOption[m].source == data.id &&nodesOption[linksOption[m].target].category >= 0 &&!nodesOption[linksOption[m].target].flag) {// 找上层tempNodes.push(nodesOption[linksOption[m].target])linksNodes.push(linksOption[m].target);}}// 找孤立点var temp = [];for(let i in linksOption){for(let j in tempNodes){if(linksOption[i].target == tempNodes[j].id&& nodesOption[linksOption[i].source].category>=0 && linksOption[i].source != data.id){// console.log(linksOption[i])temp.push(linksOption[i].target)}else if(linksOption[i].source == tempNodes[j].id&& nodesOption[linksOption[i].target].category>=0 && linksOption[i].target != data.id){temp.push(linksOption[i].source)}}}var  uniqueTemp = [...new Set(temp)]var elementsSet = new Set(uniqueTemp)linksNodes = linksNodes.filter(item=>!elementsSet.has(item))// 将上下层节点的隐藏设置if (linksNodes != null && linksNodes != undefined) {for (let k in linksNodes) {nodesOption[linksNodes[k]].category =nodesOption[linksNodes[k]].category * -1;}nodesOption[data.id].flag = false;}} else {// 如果节点未展开,将其所有的关联节点打开for (let m in linksOption) {// 找上下“未显示的”层节点if (linksOption[m].target == data.id &&nodesOption[linksOption[m].source].category < 0) {// 找下层linksNodes.push(linksOption[m].source);} else if (linksOption[m].source == data.id &&nodesOption[linksOption[m].target].category < 0) {// 找上层linksNodes.push(linksOption[m].target);}}// 将上下层节点的显示设置if (linksNodes != null && linksNodes != undefined) {for (let k in linksNodes) {nodesOption[linksNodes[k]].category =nodesOption[linksNodes[k]].category * -1;}nodesOption[data.id].flag = true;}}// option.series[0].data = linksNodes;this.myChart1.setOption(option);}},},mounted() {this.init();},
};
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/180577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

额,收到阿里云给的赔偿了!

众所周知&#xff0c;就在刚过去不久的11月12号&#xff0c;阿里云突发了一次大规模故障&#xff0c;影响甚广。 以至于连咱们这里评论区小伙伴学校的洗衣机都崩了&#xff08;手动doge&#xff09;。 这么关键的双11节点&#xff0c;这么多热门业务和产品&#xff0c;这么大规…

Linux如何查找某个路径下大于1G的文件

find 命令可以用于在 Linux 或 macOS 系统中查找文件和目录。如果你想查找大于1GB的文件&#xff0c;可以使用 -size 选项结合 参数。以下是一个示例&#xff1a; find /path/to/search -type f -size 1G这里的 /path/to/search 是你要搜索的目录的路径。这个命令将查找该目录…

Unity3d 灯光阴影开启,法线贴图出现BUG

URP项目打开灯光的阴影后&#xff0c;法线贴图出现BUG 解决方案&#xff1a;按照下图所示调整材质的选项即可

XML Schema中的attributeFormDefault

XML Schema中的attributeFormDefault属性&#xff0c;用以指定元素的属性默认是否必须带有命名空间前缀。 attributeFormDefault属性可以取值qualified或unqualified&#xff0c;默认值是unqualified。 当取值为qualified时&#xff0c;表示属性必须用命名空间作为前缀&#x…

精力管理金字塔

精力管理金字塔 由协和医学院的张遇升博士在《掌控精力&#xff1a;不疲惫的身心管理术》一书中提出&#xff0c;分层次对精力管理提出了解析和有效的建议。 模型介绍 精力管理是一个可以学会的技能&#xff0c;学会了科学的精力管理方法&#xff0c;就能使自己的精力越来越好…

股票技术从初级到高级,从实盘进阶到摩尔缠论

一、教程描述 摩尔缠论是什么&#xff1f;一个伟大的缠论分支体系&#xff0c;由顶尖高手创立的缠论分支&#xff0c;这个顶尖高手&#xff0c;江湖上的代号为摩尔&#xff0c;可能是一个人&#xff0c;或者是一群人。摩尔缠论&#xff0c;基于缠论的核心思想与基础理论&#…

面试必须要知道的MySQL知识--索引

10 索引 10.1 数据页存储结构 10.1.1 数据页的各个部分 在讲索引之前&#xff0c;让我们看看一个单独的数据页是什么样子的 去除掉一些我们不太需要那么关注的部分后&#xff0c;简化如下&#xff1a; 也就是说平时我们在一个表里插入的一行一行的数据会存储在数据页里&#…

Leetcode算法系列| 3. 无重复字符的最长子串

目录 1.题目2.题解C# 解法一&#xff1a;滑动窗口算法C# 解法二&#xff1a;索引寻找Java 解法一&#xff1a;滑动窗口算法Java 解法二&#xff1a;遍历字符串 1.题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例1: 输入: s "ab…

数据结构——链式二叉树的实现(详解)

呀哈喽。我是结衣。 不知道大家的递归学到怎么样呢&#xff1f;如果大家的递归功底不是很好&#xff0c;那么我相信在学完这篇文章后大家一定会对递归有一个更深层次的了解的。 构造链式二叉树 在学习二叉树的基本操作前&#xff0c;需先要创建一棵二叉树&#xff0c;然后才能…

直播场景视频和特效解决方案

直播已经成为企业与消费者互动的重要方式&#xff0c;如何提供优质的直播内容&#xff0c;提升直播效果&#xff0c;以及实现直播内容的商业化转化&#xff0c;一直是企业面临的重要挑战。为此&#xff0c;美摄科技提供了一套全面的直播场景解决方案&#xff0c;帮助企业解决这…

爬虫学习 异步爬虫(五)

多线程 多进程 协程 进程 运行中的程序 线程 被CPU调度的执行过程,操作系统 运算调度的min单位 在进程之中,进程中实际运作单位 from threading import Thread#创建任务 def func(name):for i in range(100):print(name,i)if __name__ __main__:#创建线程t1 Thread(target …

0 NLP: 数据获取与EDA

0数据准备与分析 二分类任务&#xff0c;正负样本共计6W&#xff1b; 数据集下载 https://github.com/SophonPlus/ChineseNlpCorpus/raw/master/datasets/online_shopping_10_cats/online_shopping_10_cats.zip 样本的分布 正负样本中评论字段的长度 &#xff0c;超过500的都…

uniapp 导航分类

商品分类数据&#xff0c;包括分类名称和对应的商品列表点击弹出 列表的内容 展示效果如下&#xff1a; 代码展示 ①div部分 <view class"container"><view class"menu-bar"><view class"menu"><view class"menu-sc…

【hive-design】hive架构详解:描述了hive架构,hive主要组件的作用、hsql在hive执行过程中的底层细节、hive各组件作用

文章目录 一. Hive Architecture二. Metastore1. Metastore Architecture2. Metastore Interface 三. Compiler四. hive架构小结 本文主要讨论了 描述了hive架构&#xff0c;hive主要组件的作用详细描述了hsql在hive执行过程中的底层细节描述了hive各组件作用 一. Hive Archite…

Kubernetes入门篇

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容Kubernetes是什么&#xff1f;为什么需要 Kubernetes&#xff0c;它能做什么&#xff1f;Kubernetes 版本进化Kubernetes 概念Kubernetes 中 3 个重要概念 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介…

毫米波雷达DOA角度计算----Capon算法

算法实现如下&#xff1a; parameter&#xff1a;雷达参数设置。 antVet&#xff1a;目标点 对应的非相参积累天线数据。 function [angle,doa_abs] caponMethod(parameter,antVec)txAntenna parameter.txAntenna; % 发射天线 [1 1]rxAntenna parameter.rxAntenna; % 接…

Java第十二篇:连接安全版kafka(Kerberos认证)出现的问题解答

Could not find a ‘KafkaClient’ entry in the JAAS configuration 问题现象 问题原因 原因没有找到&#xff0c;怎么引起的倒是很清楚。原因就是找到不到指定路径下的kafka_client_jaas.conf文件&#xff0c;别看我的路径带了两个//&#xff0c;但没问题的&#xff0c;等同…

梦极光(ez_re?)

ez_re 先查壳看看&#xff0c;没有壳 32位 我先说说这道题 打开分析找到主函数 在这里就是flag了&#xff0c;用十六进制转ascii码 我们先运行这个程序看看 我想说说我的想法 首先没看出来这里是十六进制转ascii码其次41D538数组用来干啥来的&#xff1f;题目里面给出的请…

Micropython STM32F4外部中断实验

Micropython STM32F4外部中断实验 &#x1f4cc;固件刷可参考前面一篇《STM32刷Micropython固件参考指南》&#x1f33f; 相关篇《Micropython STM32F4入门点灯》&#x1f4cd;固件下载&#xff1a;https://micropython.org/download/?mcustm32f4&#x1f516;本例程基于STM32…

网络运维与网络安全 学习笔记2023.11.28

网络运维与网络安全 学习笔记 第二十九天 今日目标 OSPF汇总之域间路由、OSPF汇总之外部路由、OSPF链路认证 OSPF安全认证之区域认证、OSPF虚链路 OSPF汇总指域间路由 项目背景 企业内网运行多区域的OSPF网络&#xff0c;在R1 上存在多个不稳定的链路 R1上的不稳定链路&a…