Vis.js中configure.filter的工作原理及自定义过滤规则使用问题

云上老周

2026-9-28

Vis.js configure.filter 函数使用说明

核心问题根源

之前的写法不生效，核心是对filter函数的参数含义和运行逻辑理解有误，且部分写法参数顺序错误。

函数参数定义

Vis.js configure.filter 固定接收两个入参，函数签名为：
filter(option, path)

option：当前遍历到的单个配置项的键名，例如 font、size、hidden
path：数组类型，代表当前配置项的完整层级路径，例如节点的字体大小配置对应的path为 ['nodes', 'font', 'size']，边的平滑配置对应的path为 ['edges', 'smooth']

运行逻辑

Vis.js遍历所有可配置项时，会逐一对每个配置项调用该filter函数：

返回true：当前配置项展示在配置面板中
返回false：当前配置项隐藏
注意：父级配置项返回false时，其下所有子级配置项会直接全部隐藏，无需再遍历判断

常见场景实现示例

示例1：仅展示physics相关所有配置

filter: function (option, path) {
  return path.includes('physics')
}

示例2：仅展示节点的font配置，隐藏边的font配置

filter: function (option, path) {
  // 父级路径放行，否则子属性无法展示
  if (path.join('.') === 'nodes') return true
  if (path.join('.') === 'nodes.font') return true
  // 仅匹配节点下的font相关子属性
  return path[0] === 'nodes' && path[1] === 'font'
}

示例3：仅开放`nodes.font.size`、`nodes.hidden`两个子属性配置

filter: function (option, path) {
  // 父级路径放行
  if (path.join('.') === 'nodes') return true
  if (path.join('.') === 'nodes.font') return true
  // 仅允许白名单内的子属性展示
  const allowList = ['nodes.hidden', 'nodes.font.size']
  return allowList.includes(path.join('.'))
}