D3.js brush() Function

D3.js brushX() Function

Last Updated : 25 Jul, 2024

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 600x600 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

D3.js brush() Function

taran910

Improve

Article Tags :

Similar Reads

D3.js brush() Function

The d3.brush() function in D3.js is used to new create a 2-D brush. The brush is generally created SVG element. Syntax: d3.brush(); Parameters: This function does not accept any parameters. Return Value: This function returns a newly created brush. Example: In this example, we will create a brush of

D3.js brushY() Function

The d3.brushY() function in D3.js is used to create a new one-dimensional brush along the y-dimension. Syntax: d3.brushY(); Parameters: This function does not accept any parameters. Return Value: This function returns a newly created One Dimensional brush along the y-axis Example: In this example, w

D3.js brush.on() Function

The brush.on() function in D3.js is used to set the event listener for the specified typenames and returns the brush.Syntax:brush.on( typenames, listener )Parameters: This function accepts two parameters as mentioned above and described below:typenames: It is the string containing one or more typena

D3.js brush.move() Function

The brush.move() Function in D3.js is used to set the active selection of the brush on the specified group. Syntax: brush.move(group, selection); Parameters: This function accepts a single parameter as mentioned above and described below group: This parameter is the specified group on which brush is

D3.js brush.clear() Function

The brush.clear() Function in D3.js is used to set the active selection of the brush on the specified group. It is an alias for brush.move with the null selection.Syntax:brush.clear(group);Parameters: This function accepts a single parameter as mentioned above and described belowgroup: This paramete

D3.js brush.extent() Function

The brush.extent() function in D3.js is used to set the brushable extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner and returns the brush. Syntax: brush.extent([extent]); Parameters: This function accepts a sin

D3.js brushSelection() Function

The d3.brushSelection() function in D3.js is used to get the brush selection for a given node. Syntax: d3.brushSelection(this); Parameters: this: used to get the bounds for the current brush. Return Value: This function returns the array containing the bounds of the brush element. Example: In this e

D3.js closePath() Function

The d3.closePath() function is used to close the current ongoing subpath and is almost the same as SVG's closepath command. Syntax: d3.closePath() Parameters: It does not accept any parameters. Return Value: It does not return any value. Example 1: HTML <!DOCTYPE html> <html lang="en

D3.js | d3.cubehelix() Function

The d3.cubehelix() function in D3.js is used to construct a new Cubehelix color and returns HSL properties of the specified color taken as the parameter of the function. Syntax: d3.cubehelix(color); Parameters: This function accepts single parameter color which specifies the CSS color. Return Value:

D3.js creator() Function

The d3.creator() function is used to return a function that creates an element whose name is given as a parameter in the function. Syntax: d3.creator( name ); Parameters: This function accepts single parameter as mentioned above and described below: name: It is the name of the container or HTML tag