Open In App

D3.js areaRadial.context() Method

Last Updated : 02 Sep, 2020
Comments
Improve
Suggest changes
Like Article
Like
Report

The areaRadial.context() method in D3.js lets you specify the canvas element’s context in which the area radial would be rendered. The area radial will be rendered in the current context when the generator is invoked. We can set the context of the area on our own using this method like color, stroke, fill, etc. The default value is null.

Syntax:

d3.areaRadial.context( _context )

Parameters: This method accepts a single parameter as mentioned above and described below:

  • _context: It is context set by the user.

Return Value: This method returns the current context.

Below given are a few examples of areaRadial.context() method in D3.js:

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
  <script src=
"https://d3js.org/d3.v5.min.js">
  </script>
</head>
<body>
  <h1 style="text-align: center;
             color: green;">
    GeeksforGeeks
  </h1>
  <h3 style="text-align: center;">
    D3.js | areaRadial.context() Method
  </h3>
  <center>
    <canvas id="gfg" width="200" height="200">
    </canvas>
  </center>
  <script>
    var points = [
      { x: 0, y: 0 },
      { x: 2, y: 3 },
      { x: 4, y: 1 },
      { x: 6, y: 8 },
      { x: 8, y: 17 },
      { x: 10, y: 15 },
      { x: 12, y: 20 }];
  
    // Get the context
    var context = d3.select("#gfg")
        .node()
        .getContext("2d");
  
    var xScale = d3.scaleLinear()
        .domain([0, 6])
        .range([0, 2 * Math.PI]);
    var yScale = d3.scaleLinear()
        .domain([0, 20])
        .range([90, 30]);
  
    var Gen = d3.areaRadial()
      .angle(d => xScale(d.x / 2))
      .innerRadius(d => yScale(d.y) / 2)
      .outerRadius(d => yScale(d.y))
      
      // Specify the context
      // to be used
      .context(context);
  
    context.translate(100, 100);
    Gen(points);
    context.strokeStyle = "black";
    context.fillStyle = "green";
    context.fill();
    context.stroke();
  </script>
</body>
</html>
 






                        










Output:




Example 2:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


<head> 


  <script src= 


"https://d3js.org/d3.v5.min.js"> 


  </script> 


</head> 


<body> 


  <h1 style="text-align: center; 


             color: green;"> 


    GeeksforGeeks 


  </h1> 


  <h3 style="text-align: center;"> 


    D3.js | areaRadial.context() Method 


  </h3> 


  <center> 


    <canvas id="gfg" width="200" height="200"> 


    </canvas> 


  </center> 


  <script> 


    var data = [ 


      { x: 10, y: 1 }, 


      { x: 15, y: 3 }, 


      { x: 20, y: 5 }, 


      { x: 25, y: 7 }, 


      { x: 30, y: 9 }, 


      { x: 35, y: 11 }, 


      { x: 40, y: 13 }]; 


  


    // Get the context 


    var context = d3.select("#gfg") 


        .node() 


        .getContext("2d"); 


  


    var xScale = d3.scaleLinear() 


        .domain([0, 6]) 


        .range([0, 2 * Math.PI]); 


    var yScale = d3.scaleLinear() 


        .domain([0, 20]) 


        .range([90, 30]); 


  


    var Gen = d3.areaRadial() 


      .angle(d => xScale(d.x / 2)) 


      .innerRadius(d => yScale(d.y) / 2) 


      .outerRadius(d => yScale(d.y)) 


  


      // Specify the context 


      // to be used 


      .context(context); 


  


    context.translate(100, 100); 


    Gen(data); 


    context.strokeStyle = "black"; 


    context.fillStyle = "green"; 


    context.fill(); 


    context.stroke(); 


  </script> 


</body> 


</html>



















                        







                        










Output:





                            
                            
                        


                                                                              

                                        

                                                                                

                                                                

                            
                                

                                
                                        Next Article
                                        
                                    
                                    
                                    

                                        D3.js areaRadial.outerRadius() Method
                                    

                                

                                                        

                        

                            

                                        

                                            

                                                

                                                

                                                    
author
        

            
        

        

                                                

                                                

                                                    taran910                                                

                                                

                                                

            
                                            

                                            
                                        

                                        

                                            
                                            

                                                
                                                
                                            

                                            
                                                                            

                                    Improve
                                    
                                

                            
                                        

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                        


                                                

                        
                                                 

                                
Similar Reads

                                

                                    
                                

                            

                        


                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	
	
	

	
	
	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    
















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox