Grapheditor

The grapheditor is a custom web component that renders nodes and edges with d3.js.

See also

• https://developer.mozilla.org/en-US/docs/Web/Web_Components

• d3

• d3 – select

Features

Quickstart

• Custom static templates with dynamic text and content

• Fully dynamic templates

• Changeable edge paths

• Dynamic styling with css classes

• Text wrapping in plain svg (this is not supported natively by browsers!)

• Pan and zoom using mouse or touch

• Highly configurable

• View only mode

• Node drag and drop

• Edge drag and drop

• Custom markers for edges (more powerful than svg markers)

• Text components for edges

• Powerful grouping mechanism

• Compatible with all web frameworks (behaves like a standard html tag)

• Many custom events

Documentation

• Quickstart
  • Adding nodes
  • Styling nodes
  • Adding a default node template
• Grapheditor
  • Component Attributes
  • Component Styling
  • Component Events
• Static Templates
  • Text injection for Node Templates
  • Dynamic content
  • Link handles
• Dynamic Templates
  • Dynamic Node Templates
  • Dynamic Marker Templates
  • Dynamic TextComponent Templates
• Edge Path Templates
  • Examples
• Groups
  • Changing the Bahaviour of Groups
  • Group Related Events
• API
  • GraphEditor
  • Node
  • Edge
  • LinkHandle
  • Marker
  • TextComponent
  • Util
  • Positioning
  • Text Wrapping
  • StaticTemplateRegistry
  • DynymicTemplateRegistry
  • DynamicTemplate
  • EdgePathGeneratorRegistry
  • EdgePathGenerator
  • Grouping
  • Drop Zones
• Changelog
  • Unreleased
  • 0.4.0 - 2020-01-28
  • 0.3.1 - 2019-12-02
  • 0.3.0 - 2019-11-22
  • 0.2.0 - 2019-10-27
  • 0.1.3 - 2019-08-22
  • 0.1.2 - 2019-07-30
  • 0.1.1 - 2019-06-22
  • 0.1.0 - 2019-04-11
  • 0.0.3 - 2019-03-04
  • 0.0.2 - 2019-02-25
  • 0.0.1 - 2019-02-15