1

我使用 react-graph-vis 作为 React 组件来绘制大量数据。出于某种原因，我无法让底层 vis.js 的集群功能正常工作。调用时，代码只是在我调用集群 API 时重新呈现现有（非集群）网络图。我想知道是否有人实施了这一点或有任何建议。具体来说，我将每个节点的边缘计数作为节点属性进行跟踪，并且为了响应用户输入，我试图将边缘计数超过用户定义阈值的所有节点聚集在一起。即使使用基于标签的简单 joinCondition，我也无法获得任何聚类来呈现。当我运行代码时，joinCondition 回调函数正确检查了所有节点以响应 UI，但图上没有呈现任何集群。谢谢！

 import React, { useEffect, useState, useContext, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid'; 

// this function is called in response to UI element; 
// cluster if node edges > threshold

function clusterGraph(edgeThreshold) {

var clusterOptions = {
  joinCondition: function (nodeOptions) {
    console.log("checking node for clustering", sliderSetting, nodeOptions);
    return nodeOptions.edgeCount >= edgeThreshold; 
  },
  clusterNodeProperties: {
    id: "cidCluster",
    borderWidth: 3,
    shape: "database",
  },
  
};

networkReference.current.clustering.cluster(clusterOptions);

}

...
  const optionsData = {
  interaction: {
    hover:true,
    navigationButtons:true,
  },
  autoResize: true,
  // height: '100%',
  width: graphWidth,
  height: graphHeight,  
  layout: {
    hierarchical: false
  },
  // arrowStrikethrough: false,
  edges: {
    length: 200,
    color: "#000000",
    font: '14px arial #000000',
    arrows: {
      to: {
        enabled: true,
        type: "arrow"
        },
      from: {
        enabled: false,
        type: "arrow"
        }
      },
    scaling: {
      min: 1,
      max: 3,
      label: {
          enabled: true,
      },
    }
  },

};

const events = {    
select: function(event) {
  var { nodes, edges } = event;
}, 
doubleClick: handleNodeDoubleClick,
};

  ... 

    <Graph
         graph={data}
         options={optionsData}
         events={events}
         key={uuidv4()} 
         getNetwork={network => (networkReference.current = network)}
     />
4

0 回答 0