Skip to content

sergiyladnych/d3-csegment

 
 

Repository files navigation

#d3-csegment A D3-JS plugin for drawing circular segments.

Installing

Download zip: https://github.com/chandramouli-sastry/d3-csegment/archive/master.zip

Example Usage

The following code shows a simple use case. Refer to the image embedded below.

var csegment = d3.csegment()
                 .radius(50) // the radius of the circle
                 .height(40); // the height of the circular segment
                 
svg.append('path')
   .attr('d',csegment)
   .attr('fill','green');`

Circular-Segment

The following image aids in understanding the API. You can read more at: http://mathworld.wolfram.com/CircularSegment.html

API Reference

# d3.csegment()

Creates a new csegment generator.

var csegment = d3.csegment();

csegment.radius(d)

Sets the radius to d and returns the generator. As of this version, d is expected to be a constant. If no arguments are passed, the radius is set to undefined.

csegment.height(d)

Sets the height of the circular segment to d and returns the generator. The height should be lesser than or equal to the radius. If it is equal to the radius, it draws a semi-circle. As of this version, d is expected to be a constant. If no arguments are passed, the height is set to undefined.

csegment.angle(d)

Sets the inclination of the central axis of the circular segment with respect to +ve x-axis and returns the generator. As of this version, d is expected to be a constant. It defaults to Math.PI/2.

Refer to this Example for usage with d3 enter method.

About

D3- Circular Segment helper

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 69.7%
  • HTML 30.3%