Contents

How to Draw a Rectangle in D3.js?

Hello! You have just started with D3.js and want to know how to draw a rectangle? Today, I will explain you how to do it and the different attributes that take a rectangle. This article is link to the SVG presentation that I have done here.

Feel free to consult it and to ask me your questions in comments.

1. Add an SVG to your Javascript file

Add in the begining of your Javascript file the definition of an SVG element like this:

1
const svg = d3.select("#canvas").append("svg").attr("width", 400).attr("height", 400);

The d3.select function allows you to connect this SVG to a division in your HTML file. The “append” function add the element in parenthesis to what is mention just before. The “attr” function means attributes. It allows you to precise some attributes for your svg object (here the width and the height in pixels).

2. Add a rect object to the SVG

We use the pretty same function to add a rectangle. In D3 it calls “rect”. Just copy-paste the snippet below create a “rect” object.

const rect = svg.append(“rect”);

3. Precise the attributes of a rect object

Now, we can use the attr function in D3 in order to fix the position of a rectangle and to precise his size.

1
rect.attr("x", 0).attr("y", 0).attr("width", 50).attr("height", 70);

As you can guest, this rectangle is placed at the position (0,0) in the SVG object.

Be aware that this position is define from the top left corner of the SVG. If you give an x or a y value that is greater than the width or the height of your SVG you will not be able to see the rectangle as a whole.

Note also that each time you define the value of an attribute that is an integer, the result will be in pixels. We will so later how to manage the size and the position of a shape regarding to the other elements on the page.

As you can guess you can precise the width and the height of a rectangle with the attributes “width” and “height”.

4. Color your rectangle!

Finally, the funniest part in drawing rectangle I think: the color.

1
rect.attr("fill", "red");

To fill your rectangle with a color of your choice just the attributes “fill” as above. You can use string like “red”, “blue, “black”, “white”,… or you can use the hex definition of a color like full white is FFFFF and black is 00000. Feel free to have a look on Google to find the color you want.

5. Chaining method

From the beginning of this article I have done a tricky thing that is called “chaining method”. As it is written, it consists of chaining the method by just using dots.

For instance you can define your rectangle with the classical method:

const rect = svg.append(“rect”);

Then precise his attributes line by line:

1
2
3
4
5
rect.attr("x",0);
rect.attr("y", 0);
rect.attr("width", 50);
rect.attr("height", 70);
rect.attr("fill", "red");

Or you can easily do it in just one line using chainning method:

1
const rect = svg.append("rect").attr("x",0).attr("y", 0).attr("width", 50).attr("height", 70).attr("fill", "red");

For more readbility you can also use a better indentation:

1
2
3
4
5
6
const rect = svg.append("rect")
		.attr("x",0)
		.attr("y", 0)
		.attr("width", 50)
		.attr("height", 70)
		.attr("fill", "red");

You should see this result:

That’s it for today. I hope you enjoyed this article. Let me know in DM if you have questions. See you!