react-relation-map

react relation map component , written with vx & d3 demo

install

yarn add react-relation-map

feature

• auto generate location for node
• responsive
• drag and drop
• zoom
• custom node style
• custom link style
• support node img
• support link description

props

Prop	Description	Type
data	map data	{nodes: Node[], links: Link[]}
style	map background style	{backgroundColor: string, radius: number}
simulate	simulate options	SimulateOptions
tooltip	create tooltip	(node: Node) => JSX.Element
onNodeClick	node click listener	(node: Node) => void

Node

interface Node {
  id: string;
  style: {
    backgroundColor: string,
    backgroundUrl: string,
    radius: number
  };
}

• backgroundColor: node background color
• backgroundUrl: node img url
• radius: node radius

Link

interface Link {
  id: string;
  source: string;
  target: string;
  style: {
    width: number,
    color: string
  };
  text: string;
  textStyle: {
    color: string,
    fontSize: string | number
  };
}

• style: line style
• textStyle: text style

SimulateOptions

interface SimulateOptions {
  width: number;
  height: number;
  collisionRadius: number;
  strength: number;
}

• width: coordinate system width, mostly it should be the container width
• height: coordinate system height
• collisionRadius: d3 simulation collisionRadius detail
• strength: d3 simulation strength detail

basic usage

import Relation from 'react-relation-map'
;<div style={{ height: 800 }}>
  <Relation
    data={{
      nodes,
      links
    }}
    style={{
      backgroundColor: '#F3F3F3',
      radius: 10
    }}
    simulate={{
      width: 1000,
      height: 800,
      collisionRadius: 30,
      strength: 0.1
    }}
    tooltip={(node: any) => {
      return <div>this is node {node.id}</div>
    }}
  />
</div>

demo