Open In App

D3.js brush() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 size 600×600 pixels on an SVG element using this method.

HTML




<!DOCTYPE html> 
<html
      
<head
    <title
        D3.js | d3.brush() 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 using the 
        // d3.brush function
        .call( d3.brush()             
        // Initialise the brush area: start at 
        // 0,0 and finishes at given width,height
        .extent( [ [0,0], [600,600] ] )       
      )
    </script
</body
  
</html


Output: The brush is created successfully, you can drag to create rectangles using this brush.


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


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