Shapes API in D3.js
Here, we will discuss how to generate different shapes in D3.js.
Configuring API
The following mentioned script can configure the shape API.
Generator Shapes
In d3.js, we can use many distinct types of shapes.
Let’s understand these shapes, discussed below:
- Arcs API
This arc generator will generate an annulus shape or a circle. We have applied these methods of API in various previous chapters of pie charts.
Let’s configure the various methods of Arcs API in detail.
d3.arc(): If we want to design an arc generator, then we can use this method.
arc(args): This method can be used to produce the arc along with the given specified arguments.
Default setting along with the angles and object radii are described as follows:
arc.centroid(args): It is applied to measure the arc centerline’s midpoint [x, y] along with the described arguments.
arc.innerRadius([radius]): It can be used to fix an inner radius through any provided radius and it will return the arc generator.
It can be defined as follows:
arc.outerRadius([radius]): It is applied to fix an outer radius through the provided radius, and it will return the arc generator.
It can be defined as follows:
arc.cornerRadius([radius]): It is applied to fix a corner radius through the provided radius and it will return the arc generator.
It can be defined as follows:
If the corner radius is greater than 0, the arc’s corners will be rounded with the help of the given radius circle. This corner radius will not be greater than the radius value = (outerRadius – innerRadius) / 2.
arc.startAngle([angle]): It is applied to set a start angle towards a function from any given angle.
It can be described as follows:
arc.endAngle([angle]): It is applied to set an end angle towards a function from any given angle.
It can be described as follows:
arc.padAngle([angle]): It is applied to set a pad angle towards a function from any given angle.
It can be described follows:
arc.padRadius([radius]): It is applied to set a pad radius towards a specified function through the provided radius. A pad radius depicts a distance as fixed linear isolating the adjacent arcs, described as the padRadius *padAngle.
arc.context([context]): It can be used to fix the context, and it will return the arc generator.
- Pies API
The pie API is applied to design any Pie generator. Let’s discuss in detail.
d3.pie: It is used to build a generator along with some default settings.
pie(data[. Arguments]): It is applied to produce a pie to the values of a given array. It will return an object’s array. The objects are the angles of the datum arc.
All the objects have some of the attributes which are discussed below:
- data: an input datum, related component inside the array of input data.
- value: The arc’s numeric value.
- index: The arc’s index.
- startAngle: The arc’s start angle.
- endAngle: The arc’s end angle.
- padAngle: The arc’s pad angle.
pie.value([value]): It sets the specified function value and produces a pie. It is described below:
pie.sort([compare]): It sorts the specified function data and produces a pie. It is described below:
pie.sortValues([compare]): It compares various values from any provided function and produces a pie.
It is described below:
pie.startAngle([angle]): It can be applied to fix the pie’s starting angle towards the described function. When an angle is not described, then it will return the latest starting angle.
It can be represented as follows:
pie.endAngle([angle]): It can be applied to fix the pie’s end angle towards the described function. When an angle is not described, then it will return the latest end angle.
It can be represented as follows:
pie.padAngle([angle]): It can be applied to fix a pad angle towards the described function and produces a pie.
It can be represented as follows:
Example:
A basic example of using d3.arc along with d3.pie is as follows:
Output
- Lines API
These lines API are used to produce the lines. We have applied these methods of API in our Graphs chapter.
Let’s understand these methods in more detail.
d3.line: It is applied to design a line generator.
line(data): It generates any line to the given data array.
line.x([x]): It is applied to fix x accessor for the described function and produces a line.
It can be depicted as follows:
line.y([y]): It is applied to fix y accessor for the described function and produces a line.
It can be depicted as follows:
line.defined([defined]): It is applied to fix a defined accessor for the described function.
It can be depicted as follows:
line.curve([curve]): This method is applied to produce a line and fixes the curve.
line.context([context]): It is applied to fix any context and produces the line. When any context is not described, then it will return null.
d3.lineRadial: It creates the radial line. This method is equal to the line generator (Cartesian).
lineRadial.radius([radius]): Its accessor will return the radius and design a radial line. It will hold the distance from an origin (0, 0).