Without further ado, this release mainly looks at pictures. “Portal of official website”

⭐ ️ new features

FA2 layout – it’s back!

“DEMO”, “DOCS”

The Force Atlas 2 that G6 2.0 once had is back! Compared to the classic force-oriented layout, Force Atlas 2 has a clearer structure and extended branches.

Legend plugins – Element types are clearer!

“DEMO”, “DOCS”

Identify and describe the different types of nodes/edges on the diagram. The main diagram elements can be highlighted and filtered by interacting with legends.

Align lines – Nodes are meant to be neat!

“DEMO”, “DOCS”

When we want to align a bunch of nodes in a straight line, human drag alignment at the pixel level is very difficult. In G6 4.3.0, we added alignment line components to help us quickly align nodes.

Pipeline subgraph layout – subgraph layout is more efficient!

“DEMO”, “DOCS”, special thanks to community contributor GitHub @colinchen2

You can quickly configure different layouts for different parts of the diagram.

Doughnut nodes – Make node details more intuitive!

“DEMO”, “DOCS”

Node details in the statistics at a glance!

Touch scrolling canvas – smoother interaction!

“DOCS”

Using the touchpad, you can also scroll the canvas, making the interactive experience smoother!

🛠 Experience optimization

Download image with Watermark – Copyright protection!

Special thanks to community contributor GitHub @xiaohu12685

Not only can you customize the watermark while drawing, but you can also download it as an image. Protect your creative copyright.

Prompt optimization – Elegant interaction!

“Fixed position relative to element” “Click to display prompt box”

The old version of the prompt box moved around the node with the mouse (left), the new version supports fixed configuration relative to the node/edge position (right) :

The old version of the prompt box can only respond to mouse in and out of the element (left), the new version supports the configuration of the response action to click the element (right) :

Nodes support iconFONT ICONS – cost reduced!

Some built-in nodes in older versions only supported Base64 or image links as node ICONS. Now, they support iconfont! It’s super convenient not to have to ask for pictures from the Internet.

More convenient apis – less code!

  • GetViewPortCenterPoint gets the canvas coordinate value of the viewport point.
  • GetGraphCenterPoint is used to get the canvas coordinate value of the point in the content of the graph.

📱 G6Mobile

Support small programs and H5 mobile graphics visualization engine

features

Support alipay small program and wechat small program

“Alipay Demo Portal” “wechat Demo Portal”

Component] through [alipay small program (https://github.com/openwayne/g6-component-alipay), or [WeChat small program component] (https://github.com/openwayne/g6-component-wx), in a small program, just a simple change, can be in use. Native Canvas rendering is preferred in small programs, which can improve performance to some extent compared with Web Canvas embedded in small programs.

  • Alipay small program demonstration

  • Micro channel micro channel small program demonstration

🎁 Demo

The node content scrolls indefinitely

“Portal”

Through G6 custom nodes, many complex nodes can be realized, such as infinite scrolling, loading more lists and other nodes, and anchor points can be set separately for each sub-item in the node. This kind of node is often used in ER graph modeling.

The sankey diagram

“Portal”

The Sankey Demo is back! The head of traffic analysis.

Editable mind maps

“Portal”

Mind mapping helps you quickly record every spark of inspiration!

Merge sibling nodes of the same kind

“Portal”

Tree graph too long? Merge like items!

Create edges from anchor points

“Portal”

Algorithm Demo attack

  • Pattern matching

  • Automatic clustering

  • Color plate calculation

  • AI Layout Recommendation

Thank you

Thanks to the partners who have been supporting, using and paying attention to G6, especially to the students in the community who have participated in the construction of G6. At present, THERE are still many shortcomings in G6, but we believe that through continuous iteration and the joint efforts of more and more students who love visual analysis, we will become better and better. Welcome to follow and star on our Github:

  • G6:github.com/antvis/G6
  • Graphin:github.com/antvis/Grap…
  • G6 official website: G6.antv. vision/zh/