Here are some of the custom nodes that G6 can implement.

When you drag one of the nodes, the result will look like the following figure. No matter which direction is changed, it always takes the nearest anchor point of two nodes to draw the closest distance of the line.

This is due to the default proximity strategy of the G6 anchor points, which, while reasonable, I’d like to avoid 😂. Let the two sides of the line be fixed to the anchor point, no matter how the node drags, the starting point of the two lines will not change.

Consider 🤔 from data’s point of view

As far as available data is concerned, it does not reflect the starting point and ending point of the specified anchor point.

If you specify the number of anchors to start from like this, this is also one way. However, if the number of anchors per node is uncertain, or if the anchors are outside the node, it is not easy to draw.

There are a lot of methods, in the finch document we have also discussed, you can move to have a look. So this time I’m going to write it in offset coordinates.

First of all, it tells you where to start and where to end. Secondly, the code is simple, and the offset value can be added directly. However, the original 4 anchor points should be changed into one anchor point [0.5, 0.5]. If there is no offset value, it will become the middle and connected in the middle, and no arrow can be seen.

Code implementation

Implement custom lines

Line drawing ideas, custom line draw method, you can get the startPoint (startPoint) and endPoint (endPoint), the two points can be an offset.

const data = {
    / / set
    edges: [{source: 'node1'.// String, must, start point ID
            target: 'node2'.// String, must, target point ID
            startOffsetX: 0.// The starting point deviates from X
            startOffsetY: 35.// The starting point deviates from Y
            endOffsetX: 0.// End deviation X
            endOffsetY: -35 // End deviation Y}}]// Custom lines
G6.registerEdge('edge-flow', {
    draw (cfg, group) {
        let start = cfg.startPoint
        let end = cfg.endPoint
        // Start point offset
        start = {
          x: start.x + (cfg.startOffsetX || 0),
          y: start.y + (cfg.startOffsetY || 0)}// End point offset
        end = {
          x: end.x + (cfg.endOffsetX || 0),
          y: end.y + (cfg.endOffsetY || 0)}// ...}})Copy the code

Implement custom nodes

Define the data for the anchor point and specify the offset position.

const graph = new G6.Graph({
    // ...
    defaultNode: {
        shape: 'node-flow'.anchors: [{offsetX: 0.offsetY: 35 },
            { offsetX: 35.offsetY: 0 },
            { offsetX: 0.offsetY: -35 },
            { offsetX: -35.offsetY: 0}]}})Copy the code

Anchor points are plotted from the data.

G6.registerNode('node-flow', {
    // ...
    afterDraw (cfg, group) {
        this.drawAnchor(cfg, group)
    },
    drawAnchor (cfg, group) {
        // Draw all the anchor points
        anchors.forEach(anchor= > {
            group.addShape('circle', {
                attrs: {
                    x: anchor.offsetX,
                    y: anchor.offsetY,
                    r: 5.fill: '#fff'.stroke: '#9B43E7'.cursor: 'pointer'}})})},// Define the anchor point position in the center
    getAnchorPoints () {
        return[[0.5.0.5]]}})Copy the code

After the drawing is done, the effect is what it said at the beginning.

The last

After wandering around for a long time in the language bird and search engine of G6, I did not find any article about how to fix the anchor point. I do not know if MY search posture is wrong. Later, I came up with an idea and this article came into being. In this article to provide a solution is to offset the beginning and end of the line point, and the code is also implemented again, there is a need to refer to the article can go to the github address.

In addition, this article does not mention custom wiring and custom drag and drop, which are not relevant to the article, so I will not mention them.





🏆 technology project phase iii | data visualization of those things…