Shapes API in D3.js

Shapes API in D3.js

A shape can be defined as an object lying on the map, connected to a latitude and longitude coordinate. Some of the various shapes are- Circle, Rectangles, Polygon, and Lines. After the configuration of any shape, you can drag or edit it.

In this chapter, we will explain that how to design or create a shape in D3.js.

Configuration of Shape API

<script src = “https://d3js.org/d3-path.v1.min.js”>
</script>
<script src = “https://d3js.org/d3-shape.v1.min.js”>
</script>
<script></script>

Shapes Generator

D3.js facilitates with the various type to different shapes. Let’s explain each shape in detail.

Arcs API

It can be applied to generate a circle or an annulus shape. The arc API methods can also be used to design the pie charts. Now, we will discuss some famed methods of arc API in detail.

d3.arc() Method

This method allows you to design a new arc generator.

arc.(args) Method

This method can be applied to create an arc according to the arguments. By default, the settings of angle and object radii are explained in the below code.

<script>
var arc = d3.arc();
arc({
            innerRadius: 0,
            outerRadius: 100,
            startAngle: 0,
            endAngle: Math.PI / 2
});
</script>

arc.centroid(args)

It can be applied to find out the midpoint {x, y} of the centerline of the arc according to the given arguments.

arc.innerRadius([radius])

You can use this method to fix the inner radius according to the existing radius. It also returns an arc generator. It is shown in the below script.

function innerRadius(d)
{
            return d.innerRadius;
}

arc.outerRadius([radius])

You can use this method to fix the outer radius according to the existing radius. It also returns an arc generator.

It is shown in the below script.

function outerRadius(d)
{
            return d.outerRadius;
}

arc.startAngle([angle])

You can apply it to fix the start angle according to the provided angle.

It can be explained in the below code.

function startAngle(d)
{
            return d. startAngle;
}

arc.cornerRadius([radius])

This method can be used to set the radius according to the existing radius, and it will also return an arc generator.

It is defined as follows.

function cornerRadius(d)
{
            return 0;
}

In the above function, the radius corner is higher than 0, then the arc’s corner should be rounded with the help of the provided radius. The radius of the corner can’t be higher than the value of radius (outerRadius – innerRadius) / 2.

arc.endAngle([angle])

You can apply it to fix the end angle according to the provided angle.

It can be explained in the below code.

function endAngle(d)
{
            return d. endAngle;
}

arc.padAngle([angle])

You can apply it to fix the pad angle according to the provided angle.

It is explained in the below code.

function padAngle()
{
            return d &&d.padAngle;
}

arc.padRadius([radius])

It can be applied to fix the pad radius according to the given radius. You can describe a pad radius with the fixed linear adjacent arcs. It can be determined as a padRadius* padAngle.

arc.context([context])

This method helps you to set the context and returns the arc generator.

Lines API

The line API method helps you to design the lines. The line API methods can also be used to design the graphs. Now, we will discuss some famed methods of line API in detail.

 line(data)

This method can be applied to design a new line by using the data array.

d3.line()

This method helps you to create a new line generator.

line.x([x])

It allows you to fix the x accessor for the defined function and creates a line. You can define it, as shown below.

function x(d)
{
            return[0];
}

line.y([y])

It allows you to fix the y accessor for the defined function and creates a line. You can define it, as shown below.

function y(d)
{
            return[1];
}

line.defined([defined])

It allows you to fix the defined accessor for the defined function. You can define it as shown in the below script.

function defined()
{
            return true;
}

line.context([context])

This method can be applied if you want to fix the context and create a line. If the context seems undefined, then it will return an empty value.

line.curve([curve])

It can be applied to design a curve and creates a line.

d3.lineRadial()

You can use this method to draw a radial line. This method is similar to the cartesian line generator.

lineRadial.radius([radius])

The accessor of this method return the radius and also draw a radial line. It is also far from the origin (0,0).

Pies API

The fundamental use of pie API is to generate a pie generator. Here, we have discussed some famed methods of pie API in detail.

d3.pie()

This method can be applied to design a pie generator containing the default setting.

pie(data[. Arguments])

It can be applied to create a pie to the given array values. This method returns an array object. The object is considered as a datum angle of an arc. Usually, the object contains the below-given properties.

Value: It contains the numeric value of the arc.

Data: It is an input datum. It is a correlated element within the array of input data.

startAngle: It represents the starting angle of the arc.

index: This property of the object contains the index of the arc.

endAngle: It represents the ending angle of the arc.

padAngle: It represents the pad angle of an arc.

pie.sort([compare])

This method helps you to sort the data and design a pie. It is explained below.

pie.sort(function(a, b)
{
            return a.name.locateCompare(b.name);
});

pie.value([value])

This method can be applied to fix the function value and also create a pie. The function is defined below.

function value(d)
{
            return d;
}

pie.startAngle([angle])

This method can be applied to set the starting angle of the pie for the stated function. If you don’t specify the angle, then it returns the existing started angle. This function is explained as follows.

function startAngle()
{
            return 0;
}

pie.sortValues([compare]) 

If you need to compare the value of the current function and design a pie, then you can use the function. It is explained below.

function compare (a, b)
{
            return 0;
}

pie.padAngle([angle])

If you are required to fix the value of the pad angle to the stated function and design a pie, then you can use the function. It is explained below.

function padAngle()
{
            return 0;
}

pie.endAngle([angle]) 

This method can be applied to set the ending angle of the pie for the stated function. If you don’t specify the angle, then it returns the existing end angle. This function is explained as follows.

function endAngle()
{
            return 2 * Math. PI;
}

Example

Here, we have an illustration of the methods above-mentioned.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<style> 
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } 
</style> 
</head> 
<body> 
<svg width="960" height="500"></svg> 
<script> 
var arc = d3.arc() 
.innerRadius(100) 
.outerRadius(240) 
.cornerRadius(15) 
var svg = d3.select("svg"), 
width = +svg.attr("width"), 
height = +svg.attr("height"), 
g = svg.append("g") 
.attr("transform", "translate(" + width / 2 + "," + height / 2 +")") 
var data = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]; 
var arcs = d3.pie()(data);       
console.log("arcs: ", arc(arcs[0])) 
var background = g.selectAll("path") 
.data(arcs) 
.enter() 
.append("path") 
.style("fill", function(d,i){ 
return d3.color("Hsl(600, 150%, " + d.value + "%)"); 
}) 
.attr("d", arc) 
</script> 
</body> 
</html> 

Output

After the execution of the above code, you got the following code.

Shapes API in D3.js