DEV Community

John Dears
John Dears

Posted on • Updated on

Creating Composite Node of a Graph using D3.js

Lately I have been using D3 for visualizing data for a React project and it got my attention for a while. I was especially interested as to the scope of this very powerful tool that has a great problem solving ability range related to any kind of data visualization.
It gives you a feeling that you can do ANYTHING. Okay, lets talk about it.

What is D3.js ?

D3.js is a javascript library used for visualizing data. It is very powerful with the combination of SVG (Support Vector Graphics) and HTML.
Now it depends on the creativity of the developer using it to actually visualize it in the most beautiful way. 

Since this is data driven , d3.js works on your pure data and transforms it in a graphical way. While applying d3.js, you will doing lot of CSS, at the same time solving some Mathematical Coordinate Geometry problems. For instance, applying Pythagorean theorem, finding distance between two coordinates (x1, y1) and (x2, y2) on a graph etc.

This article especially focuses on creating a complex node of a graph. A Complex node refers to a node which will have a lot of elements or information attached to it, instead of just an empty circle.

Why v5 version especially ?

You will find so many example snippets and gists especially on or stackoverflow for creating graphs or trees with v3 version but not many on the v5 version.


Html, CSS , Javascript, Coordinate Geometry.

Let's Start

We will be writing a simple working script for creating a complex SVG node of a graph.
First, you need to include the following <script> inside your html <body> for using d3 v5 library.

Canvas and data container element

Specify the canvas’s width and height where all the SVG elements will reside. We then call on body element, appending svg to it, and specifying properties like width and height We currently have our json data as nodes with all params that we require to visualize.

Lets append new element g into svg variable (canvas) and insert node data into it, indexing with id.

Rectangular node

Now we append rect element into our svg with (x,y) coordinates as (0,0).

Now this gets tricky here, as we now have our basic node ready and would like to place many more elements inside with reference to the rectangular node and not canvas. One of the ways for doing that is to get coordinates using getBBox().

Image element

Now that we have placement coordinates of this box, lets place things inside.
Say I want to place a logo image-icon here available. It's simple.

As you can see we have tweaked X and Y a little bit depending on where we would like it to be. I wanted it to be in middle, with a little bit of tab (10) from left.

Text element

Now, we want some text. We use the node data and access it using keys. And again, append text to svg like below:

another example to add text

Circular counter element

Now what if I want to insert a circle inside the rectangular node and maintain a text inside it. We do it as follows:

and text

At last simply merge all the elements into one.

Wondering how does it look like while inspecting. See for yourself.


Discussion (1)

afrinc profile image
John Dears Author

Cool right!!! You can find the entire code here

Happy learning!!!

You can contact me on LinkedIn