在d3中使用圆弧绘制椭圆答案

【问题标题】：Ellipse drawing By using arc in d3在d3中使用圆弧绘制椭圆
【发布时间】：2016-02-13 21:35:30
【问题描述】：

我想用圆弧画一个椭圆。我是为圆形做的，但我无法为椭圆做。请帮我画椭圆

圈子代码

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>

【问题讨论】：

<ellipse> 有什么问题？
我需要在路径元素中使用圆弧添加椭圆。这是我的要求
很公平！ This 可能会有所帮助。
抱歉，它添加了具有不同路径元素的椭圆，请查看我上面的示例，其中圆圈具有不同的路径元素。这样我就可以在每个不同的元素上添加不同的颜色。我必须实现彩虹椭圆

标签： jquery d3.js svg jquery-svg

【解决方案1】：

D3 arc() 函数只生成圆弧段。它实际上会根据您提供的内半径和外半径生成实体形状的轮廓。

将圆弧转换为椭圆的唯一方法是对水平和垂直尺寸进行不同的缩放。见下文。

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>

当然缺点是不均匀的缩放会影响圆弧的粗细。也许这对你没问题。如果没有，您也许应该用更多关于您实际想要达到的目标的细节来扩展您的问题。

【讨论】：