使圓環彎曲的邊緣

我有donut chart。我想讓甜甜圈的邊緣彎曲，因爲圖像顯示爲 enter image description here 。我試圖用這個代碼來實現我想要的，但我不能。使圓環彎曲的邊緣

var arc = d3.svg.arc() 
     .innerRadius(innerRadius) 
     .outerRadius(outerRadius) 
     .startAngle(0);

來源

2014-04-03 user3002180

你試過設置'卒中linejoin'到'round'爲生成的路徑？ –

@LarsKotthoff小圓弧段是一個封閉的填充區域''，不是一個很厚的曲線。 –

@TimothyShields仍然有效，如果你描邊路徑：http://jsfiddle.net/h9XNz/99/ –

的d3.svg.arc()發生器假設你給它一個datum，而不是一個列表data。因此，它假定startAngle,endAngle,innerRadius,outerRadius中的每一個是單個常數或單個函數。

使用此生成器不能直接將圓弧的末端倒圓角。

你可以，但是，畫兩個圈超過圓弧的端點，使用arc.centroid(startAngle)和arc.centroid(endAngle)作爲他們的中心和(outerRadius-innerRadius)/2作爲其半徑。這會給你圓潤的外觀。

文檔：arc.centroid

來源

2014-04-03 19:39:41

我按照你說的做了檢查[jsfiddle]（http://jsfiddle.net/gjA73/2/）。但我無法獲得第二個圈子的轉換。 – user3002180

你似乎在動畫文本沒有問題。以同樣的方式製作第二個圓。 –

可以使用d3.svg.arc的cornerRadius財產（），在D3 V3.5添加

var arc = d3.svg.arc() 
    .innerRadius(innerRadius) 
    .outerRadius(outerRadius) 
    .cornerRadius(outerRadius - innerRadius) 
    .startAngle(0);

http://jsfiddle.net/Lxnymj28/1/

來源

2014-12-04 12:26:38 Marjan

cornerRadius是有點馬車，我不知道這是否是因爲D3或只是如何SVGs工作。如果你有接近360度或類似1度的弧它毛刺出來。 –

使圓環彎曲的邊緣

回答

相關問題