D3.js lineRadial.defined() method
The d3.lineRadial.defined() method lets you specify whether there is data defined for a given data point, angle, or not. If this method returns false, this means that data point exists, else true.
Syntax:
d3.lineRadial.defined(data_point);
Parameters:
- data_point: data_point to be checked, it can be an angle, radius, etc.
Return Value: This method returns a boolean value.
Example 1: In this example, we will omit a certain angle using this method.
<!DOCTYPE html><html><meta charset="utf-8"><script src=</script><body> <h1 style="text-align: center; color: green;"> GeeksforGeeks </h1> <center> <svg id="gfg" width="200" height="200"> <g transform="translate(100, 100)"></g></svg></center> </body><script> var lineRadialGenerator = d3.lineRadial(); var data = [ {angle: 0, radius: 10}, {angle: 3.14 * .5, radius: 35}, {angle: 3.14 * .75, radius: 55}, {angle: 3.14, radius: 60}, {angle: 3.14 * 1.25, radius: 65}, {angle: 3.14 * 1.5, radius: 70}, {angle: 3.14 * 1.75, radius: 75}, {angle: 3.14 * 2, radius: 80}, {angle: 3.14 * 2.25, radius: 85}, {angle: 3.14 * 2.5, radius: 90}, {angle: 3.14 * 2.75, radius: 95}, {angle: 3.14 * 3, radius: 100}, {angle: 3.14 * 3.25, radius: 105}, {angle: 3.14 * 3.5, radius: 110} ]; var lineRadialGenerator = d3.lineRadial() .angle((d) => d.angle) .radius((d) => d.radius) // Excluding specific angle .defined((d) => d.angle >= 3.14); d3.select("#gfg") .select("g") .append("path") .attr("d", lineRadialGenerator(data)) .attr("fill", "none") .attr("stroke", "green"); </script> </html> |
Output:
Example 2:
<!DOCTYPE html><html><meta charset="utf-8"><script src=</script><body> <h1 style="text-align: center; color: green;"> GeeksforGeeks </h1> <center> <svg id="gfg" width="200" height="200"> <g transform="translate(100, 100)"></g></svg></center> </body><script> var lineRadialGenerator = d3.lineRadial(); var data = [ {angle: 0, radius: 10}, {angle: 3.14 * .5, radius: 35}, {angle: 3.14 * .75, radius: 55}, {angle: 3.14, radius: 60}, {angle: 3.14 * 1.25, radius: 65}, {angle: 3.14 * 1.5, radius: 70}, {angle: 3.14 * 1.75, radius: 75}, {angle: null, radius: 80}, {angle: 3.14 * 2.25, radius: 85}, {angle: 3.14 * 2.5, radius: 90}, {angle: 3.14 * 2.75, radius: 95}, {angle: 3.14 * 3, radius: 100}, {angle: 3.14 * 3.25, radius: 105}, {angle: 3.14 * 3.5, radius: 110} ]; var lineRadialGenerator = d3.lineRadial() .angle((d) => d.angle) .radius((d) => d.radius) // Excluding null angles .defined((d) => d.angle != null); d3.select("#gfg") .select("g") .append("path") .attr("d", lineRadialGenerator(data)) .attr("fill", "none") .attr("stroke", "green"); </script> </html> |
Output:
Please Login to comment...