helpers.each(this.segments,function(segment, index){ segment.transition({ circumference : this.scale.getCircumference(), outerRadius : this.scale.calculateCenterOffset(segment.value) },easingDecimal); segment.endAngle = segment.startAngle + segment.circumference; // If we've removed the first segment we need to set the first one to // start at the top. if (index === 0){ segment.startAngle = Math.PI * 1.5; } //Check to see if it's the last segment, if not get the next and update the start angle if (index < this.segments.length - 1){ this.segments[index+1].startAngle = segment.endAngle; } segment.draw(); }, this);
helpers.each(this.segments,function(segment,index){ segment.transition({ circumference : this.calculateCircumference(segment.value), outerRadius : this.outerRadius, innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout },animDecimal); segment.endAngle = segment.startAngle + segment.circumference; segment.draw(); if (index === 0){ segment.startAngle = Math.PI * 1.5; } //Check to see if it's the last segment, if not get the next and update the start angle if (index < this.segments.length-1){ this.segments[index+1].startAngle = segment.endAngle; } },this);
var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle), withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius); var centreAngle = this.startAngle + ((this.endAngle - this.startAngle) / 2), rangeFromCentre = (this.outerRadius - this.innerRadius) / 2 + this.innerRadius; return { ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle); ctx.arc(this.x, this.y, this.innerRadius, this.endAngle, this.startAngle, true);
d3.svg.arc().startAngle(function(d) { return -triangleAngle / 2; }).endAngle(function(d) { return triangleAngle / 2; }).innerRadius(function(d) { return geometryConfig.radialScale(domainMin + (d[2] || 0)); }).outerRadius(function(d) { return geometryConfig.radialScale(domainMin + (d[2] || 0)) + geometryConfig.radialScale(d[1]); })
d3.ribbon() .source(d => d[0]) .target(d => d[1]) .radius(150) .startAngle(d => -2 * Math.PI * (1 / data.length) * d) .endAngle(d => -2 * Math.PI * (1 / data.length) * ((d - 1) % data.length))
arc() { return d3.arc() .innerRadius(this.props.innerRadius) .outerRadius(this.props.outerRadius) .startAngle(0) }
this.body.append("svg:path") .style("fill", color) .attr("d", d3.svg.arc() .startAngle(this.valueToRadians(start)) .endAngle(this.valueToRadians(end)) .innerRadius(0.65 * this.config.raduis) .outerRadius(0.85 * this.config.raduis)) .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });
d3.arc() .startAngle( (d) => { return Math.max(0, Math.min(2 * Math.PI, x(d.x0))); }) .endAngle( (d) => { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); }) .innerRadius( (d) => { return Math.max(0, y(d.y0)); }) .outerRadius( (d) => { return Math.max(0, y(d.y1)); })
function createArc(data): string { return d3Shape .arc() .innerRadius(data.innerRadius || 0) .outerRadius(data.outerRadius || data.radius || 2) .startAngle(data.startAngle || 0) .endAngle(data.endAngle || 2 * Math.PI)(); }
d3.arc() .startAngle(function (d) { return d.x0; }) .endAngle(function (d) { return d.x1; }) .innerRadius(function (d) { return Math.sqrt(d.y0); }) .outerRadius(function (d) { return Math.sqrt(d.y1); })
d3.arc() .startAngle(d => x(d.x0)) .endAngle(d => x(d.x1)) .innerRadius(d => d.y0) .outerRadius(d => d.y1)
helpers.each(this.segments,function(segment,index){ segment.transition({ circumference : this.calculateCircumference(segment.value), outerRadius : this.outerRadius, innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout },animDecimal); segment.endAngle = segment.startAngle + segment.circumference; segment.draw(); if (index === 0){ segment.startAngle = Math.PI * 1.5; } //Check to see if it's the last segment, if not get the next and update the start angle if (index < this.segments.length-1){ this.segments[index+1].startAngle = segment.endAngle; } },this);
helpers.each(this.segments,function(segment, index){ segment.transition({ circumference : this.scale.getCircumference(), outerRadius : this.scale.calculateCenterOffset(segment.value) },easingDecimal); segment.endAngle = segment.startAngle + segment.circumference; // If we've removed the first segment we need to set the first one to // start at the top. if (index === 0){ segment.startAngle = Math.PI * 1.5; } //Check to see if it's the last segment, if not get the next and update the start angle if (index < this.segments.length - 1){ this.segments[index+1].startAngle = segment.endAngle; } segment.draw(); }, this);
var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle), withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius); var centreAngle = this.startAngle + ((this.endAngle - this.startAngle) / 2), rangeFromCentre = (this.outerRadius - this.innerRadius) / 2 + this.innerRadius; return { ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle); ctx.arc(this.x, this.y, this.innerRadius, this.endAngle, this.startAngle, true);
// Returns a d3 arc // Which starts at 0 (top-center of circle) // Has an inner radius of 100px and outer radius of 110px arc() { return d3.arc() .innerRadius(this.props.innerRadius) .outerRadius(this.props.outerRadius) .startAngle(0) }