Alex 007
Alex 007

G6 图可视化引擎——入门教程——使用图布局 Layout

当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 9 种一般图的布局和 4 种树图的布局：

  • 一般图：
    • Random Layout：随机布局；
    • Force Layout：经典力导向布局；（布局网络中粒子之间具有引力和斥力，从随机无序的布局不断演变为趋于平衡稳定的布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。）
    • Circular Layout：环形布局；
    • Radial Layout：辐射状布局；
    • MDS Layout：高维数据降维算法布局；
    • Fruchterman Layout：Fruchterman 布局，一种力导布局；
    • Dagre Layout：层次布局；
    • Concentric Layout：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心；
    • Grid Layout：格子布局，将节点有序（默认是数据顺序）排列在格子上。
  • 树图布局：
    • Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
    • CompactBox Layout：紧凑树布局；
    • Mindmap Layout：脑图布局；
    • Intended Layout：缩进布局。

本教程中，我们使用的是力导向布局 (Force Layout)。

G6 图可视化引擎——入门教程——使用图布局 Layout_第1张图片

取消自动适配画布

我们在之前的教程里面，为了能够将超出画布的图适配到视野中，在实例化图时使用了 fitView 配置项。这节开始我们将会去掉这个特性。因为复杂的布局系统会打破适配的规则，反而会造成更多的困扰。让我们将相关的适配代码变为注释：

const graph = new G6.Graph({
  // ...
  // fitView: true,
  // fitViewPadding: [ 20, 40, 50, 20 ]
});

默认布局

当实例化图时没有配置布局时：

  • 若数据中节点有位置信息（x 和 y），则按照数据的位置信息进行绘制；
  • 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。

配置布局

G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 type: ‘force’，即经典力导向图布局。并设置了参数 preventOverlap: true ，表示希望节点不重叠。

const graph = new G6.Graph({
  // ...                      // 其他配置项
  layout: {                // Object，可选，布局的方法及其配置项，默认为 random 布局。
    type: 'force',         // 指定为力导向布局
    preventOverlap: true,  // 防止节点重叠
    // nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。
  }
});

结果如下：
G6 图可视化引擎——入门教程——使用图布局 Layout_第2张图片

如图所示，节点按照力导向布局自动平衡。但是图中的节点过于拥挤，边上的文字信息被挤占，无法看清。我们希望布局计算边的距离可以更长一些。G6 的力导向布局提供了 linkDistance 属性用来指定布局的时候边的距离长度：

const graph = new G6.Graph({
  // ...
  layout: {
    type: 'force',
    preventOverlap: true,
    linkDistance: 100, // 指定边距离为100
  },
});

结果如下：

G6 图可视化引擎——入门教程——使用图布局 Layout_第3张图片
提示：布局将在调用 graph.render() 时执行计算。

完整代码

至此，完整代码如下：


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Tutorial Demotitle>
head>
<body>
<div id="mountNode">div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js">script>
<script>
    const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
            size: 30,
            labelCfg: {
                style: {
                    fill: '#fff',
                },
            },
        },
        defaultEdge: {
            labelCfg: {
                autoRotate: true,
            },
        },
        layout: {
            type: 'force', // 设置布局算法为 force
            linkDistance: 200, // 设置边长为 100
            preventOverlap: true, // 设置防止重叠
        },
    });
    const main = async () => {
        const response = await fetch(
            'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
        );
        const remoteData = await response.json();

        const nodes = remoteData.nodes;
        const edges = remoteData.edges;
        nodes.forEach(node => {
            if (!node.style) {
                node.style = {};
            }
            node.style.lineWidth = 1;
            node.style.stroke = '#666';
            node.style.fill = 'steelblue';
            switch (node.class) {
                case 'c0': {
                    node.type = 'circle';
                    break;
                }
                case 'c1': {
                    node.type = 'rect';
                    node.size = [35, 20];
                    break;
                }
                case 'c2': {
                    node.type = 'ellipse';
                    node.size = [35, 20];
                    break;
                }
            }
        });
        edges.forEach(edge => {
            if (!edge.style) {
                edge.style = {};
            }
            edge.style.lineWidth = edge.weight;
            edge.style.opacity = 0.6;
            edge.style.stroke = 'grey';
        });

        graph.data(remoteData);
        graph.render();
    };
    main();
script>
body>
html>

你可能感兴趣的:(#,G6,图可视化引擎)

  • 随着湖人队夺冠，NBA总决赛告一段落，可过程很值得回味！ 陈晖篮球
    当湖人队在总决赛G6轻松击败热火队，也就意味着本赛季的NBA总决赛告一段落，可回顾其过程，还是蛮值得好好回味……经过六场决战，今年NBA总决赛终于决出最后的总冠军——湖人队。恭喜这支西部霸主重回巅峰，在NBA总冠军数量上追平历史第一的凯尔特人队——17冠。作为失利的一方——热火队有着太多遗憾，但说实话能打到现在，这支球队配得上足够尊重。总决赛尽管已全部结束，本赛季也已告一段落，但回过头可以好好回味
  • 预算1000元可以买到哪些性价比较高的阿里云服务器，价格是多少？ 阿里云最新优惠和活动汇总
    1000元预算购买云服务器以普通企业用户居多，在2023年，这个预算可以买到共享型s6、计算型c6、通用型g6、计算型c7和通用算力型u1实例2核4G、2核8G、4核8G等配置的云服务器，本文为大家介绍下1000元左右预算具体可以买到的云服务器实例和配置及优惠价格。一、阿里云服务器2023年有哪些优惠？2023年阿里云服务器有共享型s6、计算型c6、通用型g6、内存型r6、计算型c7、通用型g7、
  • 阿里云服务器8核32G配置租用一年多少钱？公网带宽和系统盘是如何收费的？ 阿里云最新优惠和活动汇总
    阿里云服务器8核32G配置租用一年多少钱？云服务器ECS通用型g6、通用网络增强型sn2ne、通用型g7实例参加活动，国内地域价格最低仅需2340.62元1年，国外地域活动价格为521.16元/3月起。首次购买后，如当前规格不能满足需求，可登录ECS控制台，进行规格/带宽/云盘升级操作，享4.5-5.5折优惠。一：目前活动中8核32G配置可选实例简介1、通用型G6处理器：：2.5GHz主频的Int
  • React使用@antv/g6绘制树形图 凉城┓.〆 Reactg6react
    在react中通过@antv/g6实现树形图，包括自定义连接线、弹窗、展开/收起、配置项说明1、自定义连接线constflowLine={ draw(cfg:any,group:any){  conststartPoint=cfg.startPoint;  constendPoint=cfg.endPoint;  constsourceModel=cfg?.sourceNode?._cfg?.mo
  • 使用G6绘制关系图谱 (完整代码) 凉城┓.〆 javascript前端react.jsg图形渲染
    参考具体配置参考G6官网1、配置文件exportconstgetGraphConfig=(width:number,height:number,elementId:string,direction?:string,)=>{return{container:elementId,width,height,fitView:true,fitCenter:true,layout:{type:'dagre',
  • 今天的巴特勒简直乔丹附体 Faith_520
    今天迎来了东决G6的比赛，北岸花园球馆，人声鼎沸，仿佛都在提前庆祝即将到手的分区冠军。热火全队此刻身在“敌营”，唯有破斧成舟，才能杀出一条血路。不管接下来的路如何走，当下确实是到了“拼死”决战时刻，要么赢要么回家，再也没有第三种选择。开局上来，热火反客为主，一顿操作领先10分左右开局，半场战罢，仍旧带着微弱的领先优势。巴特勒，攻防一体，上半场打出了完美表现，独得21分，率先做好了表率，给队友们表表
  • 「原创」一张图告诉你圣诞节人们都说了啥 kopiluwaky
    2019年圣诞悄咪咪就过去了，AntVG6（开源的图可视化引擎）做了一张交互图告诉你在Twitter上的网友们在圣诞夜与圣诞节这天都爱发些什么推。图1圣诞夜与圣诞节发送的tweet中出现频率top100的单词概览。我们从5w条于圣诞夜/圣诞节发布的推文中抽取了出现频率最高的100个有意义的单词，即去掉了of、I、you一类没有实际含义的单词，使用G6做了如上一个Q弹的气泡词云图。一个泡泡代表一个单
  • antv/g6绘制数据流向图 千寻物语 前端angular.js
    antv/g6绘制数据流向图前言接口模拟数据htmlts页面效果前言在业务开发中需要绘制数据流向图，由于echarts关系图的限制以及需求的特殊要求，转而使用antv/g6实现，本文以代码的方式实现数据流向需求以及节点分组,版本"@antv/g6":“^4.8.24”,本文主要列出关键性的代码，并非全部代码接口模拟数据getCenterFlowG6ApiV2(data={}){returnnewP
  • [EFI]HP EliteDesk 800 G6 Mini PC电脑 Hackintosh 黑苹果efi引导文件 黑果魏叔 电脑
    硬件型号驱动情况主板HPEliteDesk800G6MiniPC处理器IntelCorei510500已驱动内存16GB2667MHzDDR4已驱动硬盘SSDNVMeKINGSTONSNVS500G500GB已驱动显卡IntelUHDGraphics630已驱动声卡Realtek®ALC222已驱动网卡Intel(R)EthernetConnection(10)I219-LM已驱动无线网卡+蓝牙F
  • 2020年3月29 周日 潇潇中英文阅读记录第848天 仲夏夜的天空
    【亲子伴读，悦享成长】（G6潇潇）中英文每天都在有条不紊地进行着，唯独少了数学。我得重新整理思路，从具像清点开始玩数学，而且也要坚持。中文：1.早上起床听古诗词和声律启蒙。2.听钱儿爸《超级西游记》-听到67牛魔王骗猴王3.阅读拼音版《唐诗300首》，读5首。拼音读物《小狗的小房子》4.《中国童话》1月故事。二宝挑选她喜欢的，我读。今天读了3个故事。6.葛瑞米.贝斯幻想大师系列《阿诺的花园》。二宝
  • 阿里云用户最新可优惠购买的活动云服务器实例规格、配置及价格 阿里云最新优惠和活动汇总
    阿里云用户购买云服务器随时都有优惠，只是不同时期可优惠购买到的云服务器配置、实例规格和价格有所不同，例如前几个月的时候，可优惠购买的云服务器实例主要以计算型c6、通用型g6等第六代云服务器为主，而现在则变成了计算型c7、通用型g7和内存型r7等第七代云服务器和计算型c8y、通用型g8y和内存型r8y等倚天云服务器，价格也有所变化，下面是截止到目前阿里云用户可优惠购买到的云服务器配置、实例和价格情况
  • 他用2场比赛影响了两大巨星的历史地位，如今却无球可打！ 侬妹
    桀骜不驯的JR-史密斯骑士把冠军功臣JR史密斯给裁员了，他已经是个完全自由球员了，有权与任一支对他有意的球队签约。然而遗憾的是，这位34岁老将似乎没有了什么吸引力，目前为止，依然没有球队愿意签下他，看来其他球队都在担忧他的神经刀属性。但是，他也曾经疯狂过，特别是2016年骑士4-3逆转勇士的史诗级系列赛中，JR史密斯在G3砍下20分，G6砍下14分，帮助骑士赢下必须赢下的比赛，这两场比赛直接影响了
  • 树形流程图-G6 是超级厉害的小仙女ya javascriptvuenpm数据可视化
    前几天接到了个需求,做一个树形的流程图,大概形状类似于antV-G6里面的自定义树图antv-G6自定义树图链接:定制树图元素样式|G6但是需求:父节点和子节点能够展开和关闭,还要有这个功能emmm..对于每接触过G6的小白来说...真的难哭了我在网上一顿找..发现并没有合适的可以直接用的..只能自己去改造,但是改造的前提的我得先学G6,所以这篇是我对G6给的树图的学习--大家可以参考首先肯定是要
  • react拖拉流程图_React下使用antv/g6实现树图/流程图 bug射击师 react拖拉流程图
    1、需求根据后台数据实现类似下图效果：因为实际节点较多，需要支持节点折叠。2、选择选择很重要，花了两天时间对比了echarts、antv里的G2、G6，甚至还翻翻了D3。这个过程有点烦，先是尝试echarts里的关系图，毕竟是大厂出来的，API文档还是挺全乎的，也易懂。深入研究后发现graph并不支持重复节点，无法实现需求，PASS。再看看echarts里的tree，实话说echarts里的树图示
  • HTML绘制拓扑简图,用最简单的方式画拓扑图！！！ 隅隅隅 HTML绘制拓扑简图
    前言前段时间重构了下面这样一个页面(产品页面不方便截图)：类似于拓扑图的配置，原来是使用go.js实现的，类似的库还有antvg6。重构主要是为了提高代码质量，降低维护成本，产品上需要更强的定制化能力(对付产品经理的变态需求)，所以经过一番研究之后，最后决定放弃使用现成的库。原因如下：维护成本高：类似的库(antv/g6,go.js)都是基于canvas实现,也都大同小异的定义了一套组件，有一定的
  • 公司采购阿里云服务器配置怎么选？ gla2018 阿里云服务器服务器阿里云运维
    公司使用阿里云服务器配置怎么选择？阿里云百科建议选择ECS计算型c7、通用型g6等独享型云服务器，不建议选择共享型或突发性能性云服务器，CPU内存配置建议选择2核4G、4核8G、4核16G起步，公网带宽建议5M带宽起，系统盘高效云盘或SSD云盘。阿里云百科来详细说下企业使用阿里云服务器配置选择说明：阿里云服务器企业用户选择说明阿里云服务器是由ECS实例规格、CPU内存、公网带宽和系统盘组成，企业用
  • AntV-G6 -- 将G6图表应用到项目中 王布尔 第三方工具库arcgisjavascript开发语言
    1.效果图2.安装依赖npminstall--save@antv/g63.代码import{useEffect}from'@alipay/bigfish/react';importG6from'@antv/g6';constdata={id:'root',label:'利息收入',subLabel:'3,283.456',ratio:3,children:[{id:'child-a',label:
  • 动态渲染拓扑图方案探究 维李设论 前端echarts数据可视化
    前言拓扑图是数据可视化领域一种比较常见的展示类型，目前业界常见的可视化展现的方案有ECharts、HighCharts、D3、AntV等。当前的项目使用的是基于ECharts的静态关系图渲染，为了后续可能扩展成动态的拓扑图渲染，本文探索了ECharts的原理以及G6的原理，也算是对自研一个可视化库的基本实现方法做了一个梳理。方案选择ECharts关系图AntVG6Graphin源码解析EChart
  • G6关系图快速制作 南波万的学分
    1.创建容器（一般为div标签）2.数据准备constdata={//点集nodes:[{id:'node1',//String，该节点存在则必须，节点的唯一标识x:100,//Number，可选，节点位置的x值y:200,//Number，可选，节点位置的y值},{id:'node2',//String，该节点存在则必须，节点的唯一标识x:300,//Number，可选，节点位置的x值y:200
  • 保罗缺席抢七！要闯出西部火箭得做好5件事：放1人单打才是关键 zoneball
    我们都知道勇士的整体实力，但本赛季这支在西决系列赛抢七中手握主场优势的火箭很明显是有拿下抢七的能力，当然目前保罗已经宣布无法出战抢七。在没有保罗的情况下，火箭要拿下抢七就必须要做好这5件事：1）三分球三分球肯定就是火箭进攻端最重要的一环，尤其是在保罗无法出战的情况下。G6首节比赛中火箭在这点上就给到勇士防守不少的困扰，甚至整个上半场22投11中的三分球帮助火箭拿下绝对优势。很明显，火箭要想在没有保
  • 租用阿里云服务器4核16G配置一年多少钱？公网带宽和系统盘是如何收费的？ 阿里云最新优惠和活动汇总
    租用阿里云服务器4核16G配置如何收费？云服务器ECS通用型g6、通用网络增强型sn2ne、通用型g7实例参加活动，国内地域价格最低仅需1208.06元1年，国外地域活动价格为269.64元/3月起。首次购买后，如当前规格不能满足需求，可登录ECS控制台，进行规格/带宽/云盘升级操作，享4.5-5.5折优惠。一：目前活动中4核16G配置可选实例简介1、通用型G6处理器：：2.5GHz主频的Inte
  • AntV G6新版源码浅析 维李设论 前端前端信息可视化g6数据可视化AntV蚂蚁金服图可视
    前言AntV是蚂蚁金服全新一代数据可视化解决方案，其中G6主要用于解决图可视领域相关的前端可视化问题，其是一个简单、易用、完备的图可视化引擎。本文旨在通过简要分析G65.x版本源码来对图可视领域的一些底层引擎进行一个大致了解，同时也为G6引擎的社区共建共享提供一些力量，可以更好的提供插件化功能的编写。架构新版G6整体是基于“插件化”的架构进行设计的，对外整体暴露Graph类及StdLib标准库，将
  • 【前端数据可视化AntV】G2 、G6 、L7 的使用 itlu
    AntV官网AntV官网查看文档的时候强烈建议使用国内镜像；否则会非常的慢。gitee地址:gitee地址强烈建议使用国内镜像1.AntV-G2的使用这里是使用vue-cli创建了一个vue项目:vuecreatelearn-antVAntV-G2-Plot的使用:快速上手npminstall@antv/g2plot--saveimport{Line}from'@antv/g2plot';1.1实
  • G6神游记（5） 裒益者
    王爷到西北，当王爷。想必这该是最高的待遇了。第四天的晚上，我们被隆重地迎接到一个蒙古包，烤全羊进来的时候，张灯结彩。今晚出场的王爷是Z。一个靓仔，一群漂亮的姑娘。靓仔主持，姑娘们拿着美酒与哈达，把王爷迎到了全羊前。主持了大概三个程序，王爷喝了三杯酒。剪彩、尝肉、献哈达。Z王爷三杯过后满面红光，靓仔又搞了一个曲子，歌不停酒不停，把热情推向高潮。
  • 阿里云活动中云服务器实例规格处理器及主要适用场景介绍 阿里云最新优惠和活动汇总
    在当下阿里云的各个活动中，云服务器有共享型s6、共享型n4、计算型c6、通用型g6、内存型r6、计算网络增强型sn1ne、通用网络增强型sn2ne、内存网络增强型se1ne等实例规格可选，不同实例规格的云服务器即使配置相同，价格也不相同，这主要是云服务器所采用的处理器不同，因此不同实例规格的主要适用场景也不尽相同，下面是小编整理的阿里云活动中云服务器实例规格处理器及主要适用场景介绍，以供大家参考选
  • 【vue】正则表达式限制input的输入： Sun Peng Vue框架vue.js正则表达式前端
    文章目录1、只能输入大小写字母、数字、下划线：/[^\w_]/g2、只能输入小写字母、数字、下划线：/[^a-z0-9_]/g3、只能输入数字和点：/[^\d.]/g4、只能输入小写字母、数字、下划线：/[^\u4e00-\u9fa5]/g5、只能输入数字：/\D/g6、只能输入英文：/[^a-zA-Z]/g7、只能输入中文、数字、英文：/[^\w\u4E00-\u9FA5]/g8、只能输入数字和
  • 关系图 antv G6 落叶上的秋 vuejavascript开发语言ecmascript
    1、安装antvG6npminstall--save@antv/g6#或者#pnpminstall--save@antv/g62、引入antvG6importG6from"@antv/g6";3、初始化G6工具//节点Tooltip插件consttooltip=newG6.Tooltip({offsetX:10,offsetY:20,getContent(e){letname=e?.item?.g
  • AntV和AntD之间的区别与联系 MInNrz 前端框架前端reactjs
    前言：最近在调研前端的一些框架，技术栈主要是用react，所以找到了2个十分相似解决方案，拿来对比一下（antd和antv都是基于react）antd对比antvantdantv解决方案企业级UI设计语言数据可视化解决方案提供一些常用的组件，button，bar，table等提供图表，例如G6关系图，X6流程图等官网AntDesign-一套企业级UI设计语言和React组件库https://ant
  • 连接多个电商平台：正品贵德如何实现无缝数据流转和内、外部系统的集成 集简云-软件连接神器 集成CRM无代码API低代码开发CRM连接集简云大数据
    无缝连接的优势在当今的电商行业中，系统间的高效连接是企业运营不可或缺的一部分。正品贵德软件有限公司的产品，如G6餐饮管理系统和G9/G10智能连锁供应链系统，提供了这种无缝连接的能力。通过使用正品贵德的软件，企业能够简化电商系统的运营，实现各种系统间的快速数据同步，而无需进行繁琐的API开发。这种“无代码开发”模式，不仅降低了技术门槛，还大幅节省了时间和成本。企业可以更加专注于核心业务，而不是技术
  • G6 初学心得及实例应用 xxxCarpe 笔记
    经过一段时间的学习，对G6有了初步的了解。下面我将通过一个具体的应用实例，来总结收获。实例简介本次实践意在通过G6构建一个关于“春季流行病”的简单图谱。通过该图谱，用户可以迅速的知晓各类疾病的症状、感染器官、就诊科室等信息。代码分析G6及数据导入//调用G6//导入数据constdata={"nodes":[{"id":"0","label":"流行性感冒","class":"disease"},
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他