Skip to content

The vue toolkit for graph analysis based on @antv/graphin

License

Notifications You must be signed in to change notification settings

lloydzhou/graphin-vue

Repository files navigation

graphin-vue

NPM Package NPM Size NPM Downloads MIT License

核心思想

  1. 直接使用@antv/graphin内置的shape和layout逻辑代码

使用一个移除react依赖的@antv/grapin核心库(详情antvis/Graphin#370) 可以在不依赖react的情况下使用graphin内置的shape和layout代码

  1. 使用vue重写ui组件以及behaviors组件以及components组件

Install

yarn add antv-graphin-vue @antv/graphin

Example

online demo

这个是使用jsx实现的vue版本的示例

import { defineComponent, reactive } from 'vue'
import Graphin, { Utils, Behaviors, Components } from 'antv-graphin-vue'
const { DragCanvas, ZoomCanvas, DragNode, ResizeCanvas } = Behaviors
const { MiniMap } = Components

const App = defineComponent({
  components: { Graphin, DragCanvas, ZoomCanvas, DragNode, ResizeCanvas, MiniMap },
  setup(props) {
    const state = reactive({
      data: {},
      layout: {
        type: 'force'
      }
    })
    onMounted(() => {
      state.data = Utils.mock(10).circle().graphin()
    })
    return () => (
      <Graphin :data="data" :layout="layout">
        <DragCanvas />
        <ZoomCanvas />
        <DragNode />
        <ResizeCanvas />
        <MiniMap />
      </Graphin>
    )
  }
})

export default App

About

The vue toolkit for graph analysis based on @antv/graphin

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages