g6的minimap中的配置_Minimap 缩略图

源码复制成功复制失败全屏 复制 运行

Minimap 缩略图

.g6-minimap {

position: absolute;

right: 0;

top: 6px;

background-color: #fff;

}

var minimap = new Minimap({

size: [window.innerWidth / 4, window.innerHeight / 4]

});

var graph = new G6.Graph({

container: 'mountNode',

width: window.innerWidth,

height: window.innerHeight,

plugins: [minimap],

defaultNode: {

size: [40, 40]

},

modes: {

default: ['zoom-canvas', 'drag-canvas']

}

});

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/g6-construction.json', function(data) {

data.nodes.forEach(function(node) {

node.id += '';

});

data.edges.forEach(function(edge) {

edge.source += '';

edge.target += '';

});

graph.read(data);

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
G6 是一个基于图形语法的可视化图形编辑引擎,提供了丰富的图形交互和图形编辑功能。G6 支持缩略图的展示,通过缩略图可以快速浏览和定位大型图形。 G6缩略图技术主要是通过 `graph.getThumbnail()` 方法生成缩略图,以及 `graph.addPlugin()` 方法添加缩略图插件。 下面是一个简单的示例: ```javascript import G6 from '@antv/g6'; const graph = new G6.Graph({ container: 'container', width: 800, height: 600, modes: { default: ['drag-canvas', 'zoom-canvas'] } }); // 添加缩略图插件 graph.addPlugin({ id: 'thumbnail', after: 'minimap', constructor: G6.Plugins['tool.thumbnail'], options: { title: '缩略图', container: 'container', width: 200, height: 150, showLabel: false } }); // 渲染图形 graph.data(data); graph.render(); // 生成缩略图并显示 const thumbnail = graph.getThumbnail(); document.getElementById('thumbnail').appendChild(thumbnail); ``` 在上面的代码,我们添加了一个缩略图插件,并使用 `getThumbnail()` 方法生成缩略图缩略图插件会在画布上显示一个缩略图,可以通过拖拽缩略图来移动画布。 缩略图插件的配置项包括: - `title`:缩略图标题 - `container`:缩略图容器的 DOM 元素 ID - `width`:缩略图宽度 - `height`:缩略图高度 - `showLabel`:是否显示节点标签 可以根据实际需求进行配置。 需要注意的是,在使用缩略图插件时,需要在 G6 的基础上额外引入 `@antv/g6-plugin` 库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值