D3.js line.defined() method

0 0 1 minute read

The d3.line.defined() method lets you specify whether there is data defined for a given data point or not. If this method returns false, this means that data point exists, else true.

Syntax:

d3.line.defined(data_point);

Parameters:

data_point: data_point to be checked.

Return Value: This method returns a boolean value.

Example 1: In this example, we will omit some points using this method.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
  <title>d3.line.defined()</title> 
</head> 
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> 
</script> 
  
<body> 
    <h1 style="text-align: center;  
               color: green;"> 
       zambiatek 
    </h1> 
  <center> 
    <svg id="gfg" width="400" height="400"> 
      </svg> 
</center> 
  <script> 
var points = [ 
      {xpoint: 25,  ypoint: 150}, 
      {xpoint: 75,  ypoint: 85}, 
      {xpoint: 100, ypoint: 115}, 
      {xpoint: 125, ypoint: 55}, 
      {xpoint: 150, ypoint: 105}, 
      {xpoint: 175, ypoint: 25}, 
      {xpoint: 200, ypoint: 155}, 
      {xpoint: 225, ypoint: 15}, 
      {xpoint: 250, ypoint: 135}, 
    ]; 
  
var Gen = d3.line() 
  .x((p) => p.xpoint) 
  .y((p) => p.ypoint) 
  .defined(((d, i) => i != 4)); 
  
d3.select("#gfg") 
  .append("path") 
  .attr("d", Gen(points)) 
  .attr("fill", "none") 
  .attr("stroke", "green"); 
  
</script> 
</body> 
</html>

Output:

Example 2: In this example, we will omit null points using this method.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
  <title>d3.line.defined()</title> 
</head> 
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> 
</script> 
  
<body> 
    <h1 style="text-align: center; 
        color: green;"> 
        zambiatek 
    </h1> 
  <center> 
    <svg id="gfg" width="400" height="400"> 
    </svg> 
</center> 
  <script> 
var points = [ 
      {xpoint: 25,  ypoint: 150}, 
      {xpoint: 75,  ypoint: null}, 
      {xpoint: 100, ypoint: 115}, 
      {xpoint: 125, ypoint: 55}, 
      {xpoint: 150, ypoint: null}, 
      {xpoint: 175, ypoint: 25}, 
      {xpoint: 200, ypoint: 155}, 
      {xpoint: 225, ypoint: 15}, 
      {xpoint: 250, ypoint: 135}, 
    ]; 
  
var Gen = d3.line() 
  .x((p) => p.xpoint) 
  .y((p) => p.ypoint) 
  .defined(function (d) { return d.ypoint !== null; }); 
  
d3.select("#gfg") 
  .append("path") 
  .attr("d", Gen(points)) 
  .attr("fill", "none") 
  .attr("stroke", "green"); 
  
</script> 
</body> 
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!