从neo4j-broswer中剥离graph图表

最新推荐文章于 2024-08-05 13:23:57 发布

qq_39220900

最新推荐文章于 2024-08-05 13:23:57 发布

阅读量334

点赞数

本文链接：https://blog.csdn.net/qq_39220900/article/details/119828559

版权

为了满足公司的精准测试调用链路需求，从neo4j-browser中剥离出图表功能。尝试vis, d3, antv等图表库未达预期效果，最终决定创建自定义react组件来实现。通过修改package.json并引入相关包，成功构建出类似neo4j-browser的图表效果。" 107047250,9109547,Numpy 数组与矩阵乘法详解,"['Numpy', '矩阵运算', '数据处理', 'Python库']

摘要由CSDN通过智能技术生成

因为公司想要实现精准测试的调用链路关系，在调研图形的时候发现neo4j-broswer的图表（如上）比较满足我们的需求，在网上参考了相关文章，找了相关的vis，d3，antv等图表都不能实现对应效果，所以决定手动从neo4j-broswer剥离图表出来

其中，package.json增加如下包

"d3": "3",
"react-svg-inline": "^2.1.1",
"semantic-ui-react": "^2.0.3",
"styled-components": "^5.3.0",

实现react组件

const GraphComponentWrapper = () => {
  const maxNeighbours = 500;//拥有最多邻居数量
  const [hoveredItem, setHoveredItem] = useState<any>();
  const [selectedItem, setSelectedItem] = useState<any>();
  const onGraphModelChange = () => {};
  const onItemMouseOver = (item: any) => {
    setHoveredItem(item);
  };
  const onItemSelect = (item: any) => {
    setS