Question

Recently I have written a project with D3, so I need an Elliptical Arc with innerRadius and outerRadius. However I don't know how to draw Elliptical Arc.The point that I have to mention is a Circular Arc is different with an Elliptical Arc, the Circular Arc will draw with just a radius that could be innerRadius and outerRadius, but the Elliptical Arc have two radius rx , ry that could be innerRadiusXand outerRadiusX and innerRadiusYand outerRadiusY, Actually I want to draw an Ellipse with d3.svg.arc() with all arc function details such as startAngle and endAngle. I don't know if there is any way to draw it with these Attributes :

attr={cx:20 , cy:20 , innerRadiusX:100 , outerRadiusX: 200 ,
       innerRadiusY:50,outerRadiusY:100,startAngel:0.5*Math.PI , endAngle: 1.5*Math.PI }

Answer 1

If I understand correctly what you want, I think you can use SVG paths. DashingD3 has a good explanation about it there.

W3 then provides an analogy relating pen and paper roughly as follows: Imagine that a pen is put on a piece of paper. The pen will touch the paper in only one point. The pen is now moved to another point. The path between the two points can be a straight line or a curve. The curve can be an arc, a cubic Bézier curve or a quadratic Bézier curve. Which means that you can use an SVG Path to make any type of SVG shape.

See "curveto". Is it what you are looking for ?

SVG Elliptical Arc with D3?

1 个答案: