JSPM

graphvisor

0.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q20187F
  • License MIT

GraphVisor is a react component that helps visualize interactive customizable directed and weighted graphs

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (graphvisor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    GraphVisor

    GraphVisor is a React component that facilitates the visualization of interactive, customizable, directed, and weighted graphs.

    npm version

    Examples

    Check out the interactive examples on the component's Storybook page.

    API

    GraphVisor

    Property Description Type Default
    data The graph data object {nodes: node[], links: link[]} /
    nodeType The type of the node: circle or image. If it's an image, the image source must be provided in each node object "image" / "circle" "circle"
    nodeSize The size of the nodes number 25
    directedLinks Specifies whether the link (edge) is directed or not boolean true
    enableDrag Specifies whether the nodes are draggable or not boolean true
    distance The distance between two nodes, or the length of the link number 200
    color The color applied to the nodes and links string black
    nodeClassName The class name applied to all nodes string /
    linkClassName The class name applied to all links string /
    linkLabelClassName The class name applied to all link labels string /
    titleClassName The class name applied to all node titles string /
    onClick The function to be called when a node is clicked (node) => void; /

    Nodes

    Property Description Type Default
    id The unique identifier of the node string / number /
    label The text shown under the node string /
    image The source of the image of the node (only used if option.type is 'image') string null
    className The class name given to the node string null
    titleClassName The class name given to the label of the node string null
    Property Description Type Default
    source The ID of the source node string / number /
    target The ID of the target node string / number /
    label The label shown on the link string null
    labelClassName The class name given to the label of the link string null
    linkClassName The class name given to the link string null
    color The color of the link string by default, it uses the options.color