Ellipse drawing By using arc in d3

Question

I want to draw a ellipse by using arc. I did it for circle but i could not make it for ellipse. Please help me for ellipse

Code For Circle

var π = Math.PI,
    τ = 2 * π,
    n = 500;

var width = 300,
    height = 200,
    outerRadius = width / 2 - 20,
    innerRadius = outerRadius - 20;

d3.select("svg").append("g")
    .attr("transform", "translate(" + width / 2 + "," + 200  + ")")
  .selectAll("path")
    .data(d3.range(0, τ, τ / n))
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .outerRadius(outerRadius)
        .innerRadius(innerRadius)
        .startAngle(function(d) { return d; })
        .endAngle(function(d) { return d + τ / n * 1.1; }))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="960" height="960"></svg>

What's wrong with [``](https://developer.mozilla.org/de/docs/Web/SVG/Element/ellipse)? — altocumulus, Feb 13 '16 at 11:21
I need to add ellipse by using arc in path element. this is my requirement — Arjun, Feb 13 '16 at 11:22
Fair enough! [This](http://stackoverflow.com/a/5737245/4235784) might help. — altocumulus, Feb 13 '16 at 11:41
Sorry but it is adding ellipse with different path element, please check my above example where circle having different path element. so that i can add different colors on each of the different element. I have to achieve rainbow ellipse — Arjun, Feb 13 '16 at 13:19

score 2 · Answer 1 · answered Feb 13 '16 at 13:35

The D3 arc() function only generates a circular arc segment. It actually generates the outline of a solid shape based on the inner and outer radii you provide.

The only way you can transform that circular arc into an elliptical one is to scale the horizontal and vertical dimensions differently. See below.

var π = Math.PI,
    τ = 2 * π,
    n = 500;

var width = 300,
    height = 200,
    outerRadius = 1,
    innerRadius = 0.85,
    cx = 200,
    cy = 150;

d3.select("svg").append("g")
    .attr("transform", "translate(" + cx + "," + cy + ") scale(" + (width/2) + "," + (height/2) + ")")
  .selectAll("path")
    .data(d3.range(0, τ, τ / n))
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .outerRadius(outerRadius)
        .innerRadius(innerRadius)
        .startAngle(function(d) { return d; })
        .endAngle(function(d) { return d + τ / n * 1.1; }))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="960" height="960"></svg>

The drawback of course is that the uneven scaling messes with the thickness of the arc. Maybe that's okay for you. If not, you should maybe expand your question with further details of what you actually are trying to achieve.

Ellipse drawing By using arc in d3

1 Answers1