Vis.js 中的 `configure` 对象中的 `filter` 对象如何工作？

Question

configure.filter 可以接收节点、边缘、布局、交互、操作、物理、选择、渲染器等字符串。它还接受一个函数，但我不知道如何调整它。我都试过了

function (enabled, path) {
  return path.indexOf('physics') !== -1;
}

和

function (option, enabled) {
  return enabled.indexOf('physics') !== -1;
}

但其中 none 有效。物理的整个配置面板仍然显示。

在Vis Network | Physics | Playing with Physics中有一个示例代码只显示边的smooth选项：

filter: function (option, path) {
    if (path.indexOf("physics") !== -1) {
        return true;
    }
    if (path.indexOf("smooth") !== -1 || option === "smooth") {
        return true;
    }
    return false;

从那里我可以疯狂地做到这一点：

return path.indexOf("smooth") !== -1 || path.indexOf("font") !== -1 || path.indexOf("smooth") !== -1

但我还是不知道它是如何工作的。这仍然限制了我选择要显示的选项。例如，我不能将 font 限制为仅用于节点，而不用于边，或者仅使用 font.size 或 hidden.

_{另请参阅：}

Answer 1

在 vis-network 中 configure.filter 允许设置过滤显示的配置选项的功能。当配置选项为 loaded/updated 时，将为每个选项调用一次此函数以确定是否应显示该选项。

根据函数定义 filter: function (option, path) { 为每个配置选项传递两个参数。第一个参数 option 是一个字符串，其中包含要检查的选项的名称，例如 "size"。第二个参数 path 是一个字符串数组，给出选项的路径，例如 ["nodes", "font"]。这些选项和路径匹配 vis-network 选项 documentation。如果应显示该选项，则该函数应 return true，否则应为 false。

要仅显示特定选项，函数应检查：

path 数组的长度 path.length === 1 以确保子类别不会错误显示（除非应显示所有子类别）
path数组中的值与要在正确位置显示的选项相匹配path.indexOf("nodes") === 0
选项值正确option === "hidden"

下面的示例显示了“节点字体”选项（颜色除外）、“节点隐藏”选项和“边缘箭头”选项。包含注释以描述检查并显示正在检查的 path 和 options 的内容。

filter: function(option, path){
  // Uncomment the below to print all options
  //console.log(path, option);
  
  // Display the general headers
  // Without this the options can display in the wrong sections
  // path: []
  // option: "nodes" or "edges"
  if (path.length === 0 && (option === "nodes" || option === "edges")){
    return true;
  }
  
  // Display the options for node fonts
  // path: ["nodes", "font"]
  // options: <any>
  if (path.indexOf("nodes") === 0 && path.indexOf("font") === 1){
    // Do not display the options for color, background or strokeColor (these appear to be bugged even in the physics example on vis.js site)
    if (option !== "color" && option !== "background" && option !== "strokeColor"){
      return true;
    }
  }
  
  // Display the option for nodes being hidden
  // path: ["nodes"]
  // option: "hidden"
  if (path.length === 1 && path.indexOf("nodes") === 0 && option === "hidden"){
    return true;
  }
  
  // Display the option for "to" arrows on edges
  // path: ["edges", "arrows", "to"]
  // option: "enabled"
  if (path.length === 3 && path.indexOf("edges") === 0 && path.indexOf("arrows") === 1 && path.indexOf("to") === 2 && option === "enabled"){
    return true;
  }
  
  // By default return false so other options are hidden
  return false;
}

这已合并到下面的工作示例中。

// create an array with nodes
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

// create an array with edges
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// create a network
var container = document.getElementById("mynetwork");
var treeData = {
  nodes: nodes,
  edges: edges,
};
var options = {
  configure: {
    filter: function(option, path){
      // Uncomment the below to print all options
      //console.log(path, option);
      
      // Display the general headers
      // Without this the options can display in the wrong sections
      // path: []
      // option: "nodes" or "edges"
      if (path.length === 0 && (option === "nodes" || option === "edges")){
        return true;
      }
      
      // Display the options for node fonts
      // path: ["nodes", "font"]
      // options: <any>
      if (path.indexOf("nodes") === 0 && path.indexOf("font") === 1){
        // Do not display the options for color, background or strokeColor (these appear to be bugged even in the physics example on vis.js site)
        if (option !== "color" && option !== "background" && option !== "strokeColor"){
          return true;
        }
      }
      
      // Display the option for nodes being hidden
      // path: ["nodes"]
      // option: "hidden"
      if (path.length === 1 && path.indexOf("nodes") === 0 && option === "hidden"){
        return true;
      }
      
      // Display the option for "to" arrows on edges
      // path: ["edges", "arrows", "to"]
      // option: "enabled"
      if (path.length === 3 && path.indexOf("edges") === 0 && path.indexOf("arrows") === 1 && path.indexOf("to") === 2 && option === "enabled"){
        return true;
      }
      
      // By default return false so option is hidden
      return false;
    }
  }
};
var network = new vis.Network(container, treeData, options);

#mynetwork {
  width: 600px;
  height: 100px;
  border: 1px solid lightgray;
}

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

Vis.js 中的 `configure` 对象中的 `filter` 对象如何工作？

How does the `filter` object in the `configure` object in Vis.js work?

vis.js-network