Open In App

D3.js brushX() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.brushX() function in D3.js is used to create a new one-dimensional brush along the x-dimension.

Syntax:

d3.brushX();

Parameters: This function does not accept any parameters.

Return Value: This function returns a newly created One Dimensional brush along the x-axis

Example: In this example, we will create a One Dimensional brush along with the x-axis brush of size 600×600 pixels on an SVG element using this method.

HTML




<!DOCTYPE html> 
<html
      
<head
    <title
        D3.js | d3.brushX() Function 
    </title
      
    <script src
        "https://d3js.org/d3.v4.min.js"
    </script
</head
  
<body
    <svg width=600 height=600 id="brush"></svg>
    <script
          
        // Selecting SVG element
        d3.select("#brush")
        // Creating a brush along x-axis 
        // using the d3.brush function
        .call( d3.brushX()             
        // Initialise the brush area: start at 
        // 0,0 and finishes at given width,height
        .extent( [ [0,0], [600,600] ] )       
      )
    </script
</body
  
</html>


Output:

Reference: https://devdocs.io/d3~5/d3-brush#brushX


Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads