如何用只有外半徑的d3.js繪製圓弧，還是用圓的扇形？

Question

要繪製弧與d3.js我們需要使用的功能

d3.arc() 
    .innerRadius(..) 
    .outerRadius(..) 
    ... 

本作的路徑從一個點乙和回一個。 我應該使用什麼來繪製簡單的弧線從A到B？ 最終，這將是定義由startAngle，endAngle和半徑

Answer 1

不幸的是，線，沒有提供原生D3發生器產生電弧，你在你的問題中描述的方式。你可以編寫你自己的函數來繪製圓弧，當然，沒有什麼東西禁止你。

但是，如果你想堅持D3電弧發生器，你有幾個選擇。

第一個很容易，只是通過相同的值outerRadius和innerRadius。例如，圓弧開始在0度和90度結束：

var svg = d3.select("svg") 
 
.append("g") 
 
.attr("transform", "translate(150,75)"); 
 

 
var arc = d3.arc() 
 
    .innerRadius(50) 
 
    .outerRadius(50); 
 
    
 
var sector = svg.append("path") 
 
    .attr("fill", "none") 
 
    .attr("stroke-width", 3) 
 
    .attr("stroke", "darkslategray") 
 
    .attr("d", arc({startAngle:0, endAngle:(Math.PI/2)}))

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>

你可能會認爲「電弧實際發生，並在同一位置回來了，這就是不是真正的圓弧「，正如您在您的問題中所述（」從A點到B並返回到A「）。那麼，對於那些完全沒有區別的現代瀏覽器來說呢。

但是，如果你真的想這樣的納米微的優化，你可以得到的只是路徑的第一M和A命令，不管是什麼innerRadius：

var myString = arc({startAngle: 0, endAngle: (Math.PI/2)}).split(/[A-Z]/); 
sector.attr("d", "M" + myString[1] + "A" + myString[2]) 

以下是演示：

var svg = d3.select("svg") 
 
    .append("g") 
 
    .attr("transform", "translate(150,75)"); 
 

 
var arc = d3.arc() 
 
    .innerRadius(0) 
 
    .outerRadius(50); 
 

 
var myString = arc({ 
 
    startAngle: 0, 
 
    endAngle: (Math.PI/2) 
 
}).split(/[A-Z]/); 
 

 
var sector = svg.append("path") 
 
    .attr("fill", "none") 
 
    .attr("stroke-width", 3) 
 
    .attr("stroke", "darkslategray") 
 
    .attr("d", "M" + myString[1] + "A" + myString[2])

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>