AntV-G6:图表自动居中显示/画布自适应/fitView

news2024/11/24 20:46:04

需求描述

图表节点较多时,可能分布到屏幕可视范围之外,期望图表自动居中显示

调研分析

阅读官网文档:G6.Graph配置项,一下就看到了这个配置项:
GraphOptions.fitView
看起来只要在初始化图表的配置里加上“fitView: true”就能万事大吉了(然鹅真的是这样吗◐.◑)

关于fitView的使用问题记录

① 设置后“没有效果”

这种情况是:已将fitView设为true,图表还是超出了屏幕
问题分析:开启fitView后,图表确实进行了自动缩放、居中的操作;但这些操作基于的“画布”可能并不是我们预期的“屏幕可视范围”,导致缩放后图表依然超出屏幕
解决思路:配置fitViewPadding,缩小画布范围
GraphOptions.fitViewPadding

② 只有一个节点时,节点变得超大

这种情况是:已经设置了fitView、fitViewPadding,数据较多的情况下显示符合预期;但图表只存在一个节点(或者几个离得很近的节点)时,节点变得超大
问题分析:首先要充分理解fitView的作用——为了让图表最大限度地充满画布而自动进行缩放、偏移;只有一个节点的图表被放大到“充满画布”,自然会变得超大
解决思路:配置maxZoom,限制图表的最大缩放比例(根据官网文档,maxZoom和minZoom对于图表缩放比例具有最高优先级)
GraphOptoins.maxZoom

③ 图表缩放得太小

与第二个问题同理,可以调整fitViewPadding放大画布范围,也可配置minZoom限制图表最小缩放比例

总结

  1. 在初始化图表的配置里加上“fitView: true”,可以使图表自动缩放、偏移,以达到最大限度地充满画布的效果;
  2. 自适应效果不太好的两个调整方向:①配置fitViewPadding限制画布范围,②配置maxZoom、minZoom限制图表最大/最小缩放比例

参考网址

[1] G6.Graph配置项

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

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

相关文章

解决PyCharm中opencv不自动补全的问题

解决PyCharm中opencv不自动补全的问题前言解决办法前言 今天下载opencv后,发现用pycharm打开并没有出现代码补全的情况,对于我这种新手极其不友好,故我去网上寻找方法。 opencv版本:4.6.0 寻找半天 有的说,要移动cv…

数据结构——二叉树的顺序存储(堆)

二叉树的顺序存储 顺序结构存储就是使用数组来存储,一般使用数组只适合表示完全二叉树,因为不是完全二叉树会有空间的浪费。而现实中使用中只有堆才会使用数组来存储,关于堆我们后面的章节会专门讲解。二叉树顺序存储在物理上是一个数组&…

玩转MySQL:如何在高并发大流量情况下正确分库分表海量数据

引言 本篇数据库专栏内容,主要会讲解不同高并发场景下的MySQL架构设计方案,也包括对于各类大流量/大数据该如何优雅的处理,也包括架构调整后带来的后患又该如何解决?其中内容会涵盖库内分表、主从复制、读写分离、双主热备、垂直分…

极简而高效的沟通管理法(有点长,但都是干货)

我想说的意思不是说为了体现工作的价值,要故意提高工作的沟通成本,相反,我们的确需要通过归纳总结梳理标准话的流程、甚至是工具化的手段来降低一个领域的沟通,但我们同时工作在找更复杂、更需要去沟通的场景中,去创造…

【PTA-训练day16】L2-028 秀恩爱分得快 + L1-064 估值一亿的AI核心代码

!L2-028 秀恩爱分得快 - 分块大模拟 PTA | 程序设计类实验辅助教学平台 这个题还是挺考验 函数合理运用 和 数据模拟处理能力 的 思路: 因为可能出现-0这种输入 所以不能是int型 stoi() 将字符串转化为整数先把每张照片的人 按照片编号储存因为题目只要…

手慢无!阿里云神作被《Spring Boot进阶原理实战》成功扒下,限时

小编又来给大家分享好书了:郑天民老师的 《Spring Boot进阶:原理、实战与面试题分析》,别问网上有没有开源版本!问就是我也不知道,哈哈!小编会在文末附电子版下载方式。 郑天民是谁? 资深架构师和技术专家…

非程序员,到底该不该学Python

前言 最近被各种Python的小广告轰炸。也有很多非程序员的朋友咨询Python相关的事儿。(前两年是前端) 所以今天不讲技术,纯BB。 进入正题吧: Python是啥: 编程语言。和大多数编程语言一样。它只能帮助人类完成一些…

3000字带你读懂:BI能解决报表解决不了的什么问题?

一、BI不等于报表 工作原因,老李经常跟不同行业的人打交道。不聊不知道,在大肆谈论“数字化转型”、“信创”、“业务对象数字化”、“BI”这类大而广的词语之下,隐藏着的却是国人的无知。搞业务的朋友不太懂这类工具和概念,我也…

mac怎么删除硬盘里面的东西?为什么苹果电脑无法删除移动硬盘文件?

mac怎么删除硬盘里面的东西?由于移动硬盘的文件系统是NTFS格式的,而这种格式与Mac电脑是不兼容的,Mac电脑没有权限对移动硬盘上的数据进行操作,Mac上不能把移动硬盘的数据删除了,那么,有没有什么操作方法&a…

状态模式(State)

参考: [状态设计模式 (refactoringguru.cn)](https://refactoringguru.cn/design-patterns/mediator) 4. 状态模式 — Graphic Design Patterns (design-patterns.readthedocs.io) design-patterns-cpp/State.cpp at master JakubVojvoda/design-patterns-cpp …

31-Vue之ECharts-饼图

ECharts-饼图前言饼图的特点饼图的基本实现饼图的常见效果显示数值南丁格尔图选中效果圆环前言 本篇来学习饼图的实现 饼图的特点 饼图可以很好地帮助用户快速了解不同分类的数据的占比情况 饼图的基本实现 ECharts 最基本的代码结构准备数据准备配置项 在 series 下设置 …

去年今日我凭借这份文档,摇身一变成了被BAT看中的幸运儿

我足够努力,当然也足够幸运。现在把这份文档和这份幸运分享给你们。 JVM 线程 JVM内存区域 JVM运行时内存 垃圾回收与算法 JAVA 四种引用类型 GC分代收集算法 VS 分区收集算法 GC垃圾收集器 JAVA IO/NIO JVM 类加载机制 由于篇幅限制小编,细节内…

使用Tensorflow2和Pytorch实现线性回归

使用Tensorflow2和Pytorch实现线性回归步骤Tensorflow2代码效果Pytorch代码效果步骤 准备步骤: 1. 创建数据集 2. 设置超参数 3. 创建模型(函数) 4. 选择损失函数 5. 选择优化器 训练步骤: 6. 通过模型(函数)前向传播 7. 计算损失 8. 对超参数求梯度 9…

【人脸识别】人脸实时检测与跟踪【含GUI Matlab源码 673期】

⛄一、简介 如何在视频流中检测到人脸以及人脸追踪。对象检测和跟踪在许多计算机视觉应用中都很重要,包括活动识别,汽车安全和监视。所以这篇主要总结MATLAB的人脸检测和跟踪。 首先看一下流程。检测人脸——>面部特征提取——>脸部追踪。 ⛄二、…

springcloud3 EurekaClient集群的搭建2

一 概述 1.1 概述 本文主要是搭建集成eurekaserver的几个客户端,即服务提供者,消费者。架构图如下所示 1.2 使用eureka整合的优点 使用Eureka管理注册的好处:消费者直接调用服务名称而不用在关系地址和端口,且该服务还有负载均…

[附源码]Nodejs计算机毕业设计基于的仓库管理系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分…

DBCO-PEG-Mesylate,Mesylate-PEG-DBCO,甲磺酸酯聚乙二醇环辛炔

一、试剂基团反应特点(Reagent group reaction characteristics): DBCO-PEG-Mesylate属于高分子PEG,甲磺酸酯是甲磺酸与醇酯化而成的酯类化合物。“点击化学"一般由叠氮化物(azide)和炔烃(…

React - 组件样式模块化

React - 组件样式模块化一. 存在的问题二. 解决样式冲突,组件样式模块化当多个组件使用相同类名时,设置的css样式会存在冲突渲染。 一. 存在的问题 例如有Page1、Page2两个组件,在 Page1 组件引入了css样式,Page2 组件未引入。 组…

用Excel写个摸球模拟器玩玩

用Excel写个摸球模拟器玩玩背景代码实现相关资料背景 最近对象有个需求,想要帮忙写个程序,实现功能:模拟两种颜色的球,随机摸球N次后,摸到不同颜色的次数。 考虑到非程序员的环境配置问题,直接用Excel中的…

【配电网规划】SOCPR和基于线性离散最优潮流(OPF)模型的配电网规划( DNP )(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…