X6 ants gold dress AntV's map editing engine, relational links X pictograms edit scenes while X6 is the twin brother G6, it follows the G6 6, go into it, 6 from the " Six Degrees of Separation " to express our awe and fascination with the relationship between data, network of relationships.
X6 born ant actual business scenarios, based on this, we have perfected the extended map editor commonly used scenes, such as small map, grid system, alignment lines, marquee, redo / undo, etc., built-in map editor conventional scene interaction and design, as a group, link the pile, node scaling, rotating, interactive connection, and provides a low-cost custom HTML and React node competency-based.
Characteristics preview
Quick Start
Only need to have to create a canvas, add a node / edge, update the node / edge, delete nodes / edges to start using these API X6, X6 and we have to extract all the features of configuration items canvas, the system default configuration file preset.ts configuration item contains more than 50 300 lines of code to configure, you can quickly customize their own canvas-based configuration capabilities of the X6.
Node connection with the canvas, diagram editing core competencies
Easy custom nodes
X6 through the presets some common node style, create a node shapeto specify which graphics to use to render node can be used directly, but most nodes and interaction style can be customized.
However, the actual business scenarios nodes may be more complex, preset style does not meet demand? It does not matter, we also provide two flexible way to customize the node. One kind of use or HTML snippet HTMLElement node is defined (using the shapedesignated html can); another may also be used to render the components React node (node registration using API X6 registered @antv/x6-react-shape with our family is born of a antd oh) .
Rich connections and arrow style
Built-in linear, curved or bend on the orthogonal line, the relationship line, circulation line styles and other common wiring patterns 10 kinds of arrows.
The grid system with unlimited canvas
Mesh node is the minimum pixel unit positioned in the canvas, for example, when the position of the node is {x: 12, y: 18}the mesh size 5, the actual location of the node to render the canvas will be {x:10, y: 20}. X6 provides a default lineand dottwo styles of grid and grid support custom size and color.
The infiniteoption to trueturn on infinite canvas, when the node / edge is moved to the edge of the canvas canvas will automatically expand the size of the canvas.
Interactivity and supporting components indispensable diagram editor
Links with the anchor pile
And by parent and child nodes isPortcan be assigned to the link options cell pile, it has connectivity. The anchor is connected to a fixed point along the border layout nodes built frame layout rectangle / circular / elliptical / triangular support custom number and location of the anchor, when the mouse hover is only displayed to the anchor node, the anchor on the press mouse can trigger wires.
Click and marquee
Click on the node / edge when the node is selected, press Cmd / Ctrl continuous click can select multiple nodes simultaneously, through rubberband to the ability to open the marquee configuration items, while supporting the selectionPreview option to configure the selected node Style / edges.
Snapline
Snaplines mobile node layout aids, disabled by default, you can guideconfigure and customize alignment line item open style.
Small map
Support for rendering custom size and style customization, that is, whether the render node / edge in the mini-map, by default only render nodes. In the mini-map does not draw the entire node, but instead node with a color, color custom color support.
UI components
Set up a complex graph editing applications also need to use the Menubar, Toolbar, Dropdown, ContextMenu, Splitbox and other UI components, we x6-components provide some of these React components, can be used with antd use.
At last
Thank you for your patience to read, X6 was a newborn, although beta version already in the R & D internal data (ER diagram), the operation and maintenance of the station (flowchart), and other product applications lines, but I believe there are many problems to be improved welcome at GitHub to give us feedback problems. If you are interested in other products or AntV X6's, you can follow us through the following channels:
- GitHub：https://github.com/antvis/x6
- AntV official website: https://antv.vision
- AntV GitHub: https://github.com/antvis