Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

跨端修炼者
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

    • vis-network 入门
    • vis-network 功能预览
    • vis-network 模块系统
    • vis-network 配置项
    • vis-network Methods(方法)
    • vis-network Cluster(集群配置项)
    • vis-network 事件
    • vis-network 从外部导入数据
    • vis-network configure
    • vis-network edges(边)
    • vis-network nodes(节点)
    • vis-network groups(组)
    • vis-network layout(布局)
    • vis-network interaction(交互)
      • 完整配置项预览
      • 配置项详情
    • vis-network manipulation(可视化操作)
    • vis-network physics(物理引擎,物理模拟)
  • fabricJS中文文档

  • paperJS中文文档

  • pixiJS教程

  • spritejs

  • 数据可视化
  • vis-network中文文档
Ame
2020-06-02

vis-network interaction(交互)

用于与关系网的所有用户交互。处理鼠标和触摸事件,以及导航按钮和弹出窗的配置项。

布局的配置项必须包含在名为“interaction”的对象中。

# 完整配置项预览

var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideEdgesOnZoom: false,
    hideNodesOnDrag: false,
    hover: false,
    hoverConnectedEdges: true,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true
    },
    multiselect: false,
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomView: true
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 配置项详情

名称 类型 默认 说明
dragNodes Boolean true 如果为true,则用户可以拖动未被固定的节点。
dragView Boolean true 如果为true,则用户可以拖动视图。
hideEdgesOnDrag Boolean false 如果为true,则在拖动视图时不会绘制边。这会加快拖动时的响应速度,提升用户体验。
hideNodesOnDrag Boolean false 如果为true,则在拖动视图时不会绘制节点。这会加快拖动时的响应速度,提升用户体验。
hover Boolean false 如果是true,启用悬停,当鼠标移到节点上时,节点使用其悬停颜色。
hoverConnectedEdges Boolean true 如果为true,则当鼠标悬停在节点上时,与其连接的边将以高亮(高亮色)显示。
keyboard Object or Boolean Object 如果为true,则使用默认设置启用键盘快捷键。可以提供keyboard对象来进行更细致的调整。
keyboard.
    enabled
Boolean false 切换键盘快捷方式的使用。如果此项为undefined,但定义了keyboard对象中的任何属性,则将其设置为true。
keyboard.
    speed.x
Number 1 按一个键或按一个导航按钮时,视图沿X方向移动的速度。
keyboard.
    speed.y
Number 1 按一个键或按一个导航按钮时,视图沿Y方向移动的速度。
keyboard.
    speed.
        zoom
Number 0.02 按一个键或按一个导航按钮,视图放大或缩小的速度。
keyboard.
    bindToWindow
Boolean true 将键盘快捷键绑定到窗口时。
无论那个DOM对象具有焦点,它们都可以工作。如果页面上有多个关系图实例,可以将其设置为false,确保键盘快捷键仅在具有焦点的关系图实例上工作。
multiselect Boolean false 如果为true,则长时间单击(或触摸)以及控件单击将添加到’选择中‘。
navigationButtons Boolean false 如果为true,则在关系图canvas上绘制导航按钮。这些按钮是HTML,可以使用CSS自定义样式。
selectable Boolean true 如果为true,则用户可以选择节点和边。
selectConnectedEdges Boolean true 如果为true,则在选中节点时,与其连接的边将高亮(高亮色)显示。。
tooltipDelay Number 300 提示框显示的延迟时间(毫秒)。
当节点或边具有“title”属性时,可以将其用提示框显示。提示框本身是一个HTML元素,可以使用CSS自定义样式。
zoomView Boolean true 如果为true,则允许用户缩放视图。
编辑 (opens new window)
上次更新: 2020/06/08, 17:06:00
vis-network layout(布局)
vis-network manipulation(可视化操作)

← vis-network layout(布局) vis-network manipulation(可视化操作) →

最近更新
01
http状态码
04-18
02
el-lists
02-13
03
test
02-13
更多文章>
Theme by ame | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式