0.1.4 • Published 5 years ago
react-relation-map v0.1.4
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>