How to create custom node shapes in G6/Graphin

Rômulo Rodrigues — Sat, 11 Feb 2023 10:59:24 +0000

So, Graphin is an awesome library, it is indeed a React toolkit for the G6 library which is and I quote:

G6 is graph visualization engine with simplicity and convenience. Based on the ability of customize, it provides a set of elegant graph visualization solutions, and helps developers to build up applications for graph visualization, graph analysis, and graph editor.

While I was working with it on a new project, I had the necessity to render nodes with different shapes, in order to a user differentiate them at first sight and therefore improve the UX.

Graphin docs are great but it took me some time to find this section of it to create a custom node shape and it was even harder to create some side effect interaction which I will get to in another article. Let's get to the code.

import Graphin, { Utils, GraphinData } from '@antv/graphin'; 

Graphin.registerNode(
  'custom-node', // This is the shape name, you can choose yours.
  {
    options: {
      style: {},
      stateStyles: {
        hover: {},
        selected: {},
      },
    },
    draw(cfg, group) {
      console.log(cfg);
      const keyshape = group.addShape('rect', { // This the node configuration and 'rect' stands for rectangle, and you can modify its shape to a square changing the width and height properties as I have done.
        attrs: {
          id: 'circle-floor',
          x: 0,
          y: 0,
          width: 20,
          height: 20,
          fill: 'black',
        },
        draggable: true,
        name: 'circle-floor',
      });
      group.addShape('text', { // This is the label configuration.
        attrs: {
          fontSize: 12,
          x: 0,
          y: 0,
          text: cfg.id, // This stands for the node ID
          fill: '#ddd',
        },
        draggable: true,
        name: 'text',
      });
      return keyshape;
    },
  },
  'single-node', // This is to tell Graphin whether this is a single node or a combo.
);

Ok, we got our square node but how can you tell Graphin to use this node shape instead of the default (graphin-circle) one?

Graphin nodes have the "type" attribute, which by default is graphin-circle.

So there are 2 ways you can change the nodes type or default shape. If you want to render all the nodes using your custom shape, you can change the default node configuration and therefore you don't have to add the type property to every single node of yours which will save you some parsing time.

Screenshot of how to do:

But let's say you want to have both the graphin-circle and square-node shapes in your network graph, obviously the nodes will either be your custom shape or the graphin-circle default conditionally, then you'll have to loop through the nodes and add the type property.
Such as:

data.nodes.forEach((node) => {
  node.type = conditional ? 'graphin-circle' : 'square-node'
})

And bum! You'll have some black squared nodes and some default circle nodes as you can see here:

And as you can see in the previous drawing custom shapes code, there are a lot of attributes you can change and customize to your custom node-shapes!

I hope you've enjoyed so far and now you can create cool shapes using Graphin!!

How to get rid of your "wheeled bike" on software engineering

Rômulo Rodrigues — Tue, 15 Nov 2022 18:30:34 +0000

Today I went to the grocery store with my daughter and she was on her bike, which does have wheels, those side-wheels that helps kids while they are yet learning how to proper ride a bicycle. I was joking around with her saying that I'd take off the side-wheels so she would learn properly and for good and she went:

No dad, please don't! Or I'll keep falling forever

But isn't this how we usually learn? We must make mistakes and learn from them, improve ourselves and keep repeating the cycle until we don't make the same mistakes again. That's how I learnt at least, and that's how I LIKE to learn.

I have obviously watch video tutorials for this and that but that's my point. Keep coding tutorial content is like riding a wheeled bike. You can do that, but at the moment you get yourself into the market, get a big project or something, you're lost, and doomed.

If you're a beginner which just started learning or someone who is already learning for a while, looking for your first opportunity, STOP WATCHING VIDEO TUTORIALS, NOW. This will NOT give you what you're looking for.

One of the fastest way to learn new technology is a 2 steps guide:

1 - Read the docs

2 - Code

Did you notice I didn't add a "watch a youtube tutorial for it?" Because that's not gonna get you to learn stuff, you will be just a code-parrot, at the most. Code parrot is someone that only knows how to reproduce/copy-and-paste code.

To get a job you must know some answers and those answers are only given to you when you practice, when you try to code and debug why the heck it is not working, and keep digging the problem and the internet about it until you finally solve that issue, and my friend, that is the precise moment where you learn the most.

And it doesn't really matter "what to code".

Oh Rômulo, but I have no ideas, how can I start?

It doesn't really matter what you will code, don't expect you're build a world saving startup on your first projects, as a matter of fact, you should even delete that code after you're done with it. Just keep coding, useless stuff, that's how you practice.

So this is my advice to you, stop copying and pasting tutorial's code from youtube, start creating your own code, from the scratch, and if you're out of ideas on what to create, why don't you help open-source projects, libraries? That might even get you that job you're looking for, or at least some real-world experience to leverage the next interview ;)

There's this tag about open-source issues which is "good-first-contribution". That's usually issues easy to solve and help you get started with some real-world coding challenges, that's gonna get you to the next level quickly.

It's time to put your wheeled bike aside and get yourself into the real world, shall we?

DEV Community: Rômulo Rodrigues

How to create custom node shapes in G6/Graphin

How to get rid of your "wheeled bike" on software engineering

1 - Read the docs

2 - Code