通過在d3中使用弧來繪製橢圓

Question

我想用弧繪製橢圓。我做了圓圈，但我無法做到橢圓。 請幫我爲橢圓

代碼爲圓

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 \t + ")") 
 
    .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>

Answer 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>

課程的缺點是，與電弧的厚度不均勻縮放混亂。也許這對你很好。如果不是，你應該擴展你的問題，並詳細說明你實際正在努力達到的目標。