react-graph-vis vs vis-network
图形可视化库
搜索包...
react-graph-visvis-network

图形可视化库

图形可视化库是用于在网页应用程序中创建和显示图形、网络和图表的工具。它们提供了各种功能，如节点和边的绘制、交互式操作、动画效果等，帮助开发者以直观的方式展示数据。react-graph-vis 是一个基于 React 的图形可视化库，封装了 vis.js，使其更易于在 React 应用中使用。vis-network 是 vis.js 的一部分，专注于网络图的绘制，提供了丰富的配置选项和高性能的渲染能力，适用于需要复杂网络可视化的项目。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
react-graph-vis0992-605 年前MIT
vis-network03,57382.7 MB34621 天前(Apache-2.0 OR MIT)

功能对比: react-graph-vis vs vis-network

集成与生态系统

  • react-graph-vis:

    react-graph-vis 作为 React 组件，易于与 React 应用集成，特别适合使用 React 的项目。它利用 React 的生命周期和状态管理，使图形的更新和渲染更加自然和高效。

  • vis-network:

    vis-network 是一个独立的库，适用于各种前端框架和纯 JavaScript 项目。它不依赖于特定的框架，提供了更通用的接口，适合需要跨平台和跨框架使用的场景。

性能与渲染

  • react-graph-vis:

    react-graph-vis 的性能依赖于底层的 vis.js，适合中小规模的图形可视化。由于其基于 React 的渲染机制，可能在处理非常大规模的图形时存在一定的性能瓶颈。

  • vis-network:

    vis-network 针对大规模网络图进行了优化，具有更高的渲染性能和内存管理能力，适合处理复杂和大规模的网络数据。

定制化与扩展性

  • react-graph-vis:

    react-graph-vis 提供了基本的定制化能力，但由于其封装性质，某些高级功能可能需要深入了解底层的 vis.js 才能实现。

  • vis-network:

    vis-network 提供了更丰富的配置选项和事件系统，允许开发者进行更深入的定制和扩展，适合需要高度灵活性的项目。

交互功能

  • react-graph-vis:

    react-graph-vis 支持基本的交互功能，如节点拖拽、缩放和点击事件，适合大多数常见的交互需求。

  • vis-network:

    vis-network 提供了更丰富的交互功能，包括多选、群组、动态添加和删除节点等，适合需要复杂交互的应用。

示例代码

  • react-graph-vis:

    react-graph-vis 示例代码

    import React from 'react';
import Graph from 'react-graph-vis';

const graph = {
  nodes: [
    { id: 1, label: 'Node 1' },
    { id: 2, label: 'Node 2' },
    { id: 3, label: 'Node 3' },
  ],
  edges: [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
  ],
};

const options = {
  layout: {
    hierarchical: false,
  },
  edges: {
    color: '#000000',
  },
};

const MyGraph = () => {
  return <Graph graph={graph} options={options} />;
};

export default MyGraph;
  • vis-network:

    vis-network 示例代码

    <!DOCTYPE html>
<html>
<head>
  <title>Vis Network Example</title>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style>
    #network {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <div id="network"></div>
  <script type="text/javascript">
    const nodes = new vis.DataSet([
      { id: 1, label: 'Node 1' },
      { id: 2, label: 'Node 2' },
      { id: 3, label: 'Node 3' },
    ]);

    const edges = new vis.DataSet([
      { from: 1, to: 2 },
      { from: 1, to: 3 },
    ]);

    const container = document.getElementById('network');
    const data = { nodes: nodes, edges: edges };
    const options = {
      layout: {
        hierarchical: false,
      },
      edges: {
        color: '#000000',
      },
    };

    const network = new vis.Network(container, data, options);
  </script>
</body>
</html>

如何选择: react-graph-vis vs vis-network

  • react-graph-vis:

    如果您正在使用 React 并希望快速集成图形可视化功能，react-graph-vis 是一个不错的选择。它封装了 vis.js，提供了更符合 React 生态的接口，适合需要快速开发和简单集成的项目。

  • vis-network:

    如果您需要更灵活和高性能的网络图绘制，尤其是在非 React 环境中，vis-network 是更好的选择。它提供了更丰富的配置和更细粒度的控制，适合需要高度定制化和复杂交互的应用。

与vis-network类似的npm包

vis-network 是一个用于可视化网络图的 JavaScript 库，广泛应用于图形和网络数据的展示。它提供了丰富的功能，包括动态交互、节点和边的自定义样式、平移和缩放等，使得用户能够创建复杂的网络图。vis-network 特别适合需要展示关系和连接的应用场景，如社交网络、知识图谱和数据关系图。

一个常见的替代库是 react-graph-vis。这是一个专门为 React 应用程序设计的库，基于 vis-network 构建。react-graph-vis 提供了 React 组件的形式，简化了在 React 项目中使用 vis-network 的过程。它允许开发者轻松地将网络图集成到他们的 React 应用中，同时保留了 vis-network 的强大功能。

如果你正在寻找一个强大的网络图可视化解决方案，vis-network 是一个很好的选择，而如果你更倾向于在 React 应用中使用图形可视化，react-graph-vis 则是一个理想的替代方案。

查看比较: 比较 react-graph-vis 和 vis-network。

react-graph-vis的README

React graph vis

A React component to display beautiful network graphs using vis.js

Show, don't tell: Demo

Make sure to visit visjs.org for more info.

Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.

A graph rendered by vis js

Due to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!

This component takes three vis.js configuration objects as properties:

  • graph: contains two arrays { edges, nodes }
  • options: normal vis.js options as described here
  • events: an object that has event name as keys and their callback as values

Usage

import React from "react";
import ReactDOM from "react-dom";
import Graph from "react-graph-vis";

import "./styles.css";
// need to import the vis network css in order to show tooltip
import "./network.css";

function App() {
  const graph = {
    nodes: [
      { id: 1, label: "Node 1", title: "node 1 tootip text" },
      { id: 2, label: "Node 2", title: "node 2 tootip text" },
      { id: 3, label: "Node 3", title: "node 3 tootip text" },
      { id: 4, label: "Node 4", title: "node 4 tootip text" },
      { id: 5, label: "Node 5", title: "node 5 tootip text" }
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]
  };

  const options = {
    layout: {
      hierarchical: true
    },
    edges: {
      color: "#000000"
    },
    height: "500px"
  };

  const events = {
    select: function(event) {
      var { nodes, edges } = event;
    }
  };
  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
      getNetwork={network => {
        //  if you want access to vis.js network api you can set the state in a parent component using this property
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can also check out the demo in the example folder.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.