2015-04-20 97 views
3

我想爲svg弧創建圓角。有什麼方法可以爲SVG ARC創建圓角?

enter image description here

這裏是我的上述圓弧代碼

(function() 
{ 
    var svg = d3.select('#pieChart').append("svg:svg").attr('width', 300).attr('height', 300).attr('fill', '#123456').append("g").attr("transform", "translate(" + 300/2 + "," + 300/2 + ")"); 
    var arc = d3.svg.arc().innerRadius(100).outerRadius(140).startAngle(0).endAngle(190 * (Math.PI)/180); 
    svg.append("path").attr('d', arc); 
}()); 
+0

好了,你有什麼問題嗎?你有任何示例代碼? – geedubb

+0

我使用d3.js創建SVG ARC。這裏是我的代碼上面的弧 (function() { var svg = d3.select('#pieChart').append("svg:svg") .attr('width', 300) .attr('height', 300) .attr('fill', '#123456') .append("g") .attr("transform", "translate(" + 300/2 + "," + 300/2 + ")"); var arc = d3.svg.arc() .innerRadius(100) .outerRadius(140) .startAngle(0) .endAngle(190 * (Math.PI)/180); svg.append("path") .attr('d', arc); }()); Seshu

回答

12

您所需要做的就是指定一個圓角半徑。然而,cornerRadius只是d3的新增內容,因此它不適用於SO代碼片段編輯器中當前可用的任何版本。

你可以看到它下面的工作,使用最新版本的D3直接從d3js.org進口:

(function(theta) { 
 
    var svg = d3.select('#pieChart') 
 
    .append("svg:svg") 
 
    .attr('width', 300) 
 
    .attr('height', 300) 
 
    .attr('fill', '#123456') 
 
    .append("g") 
 
    .attr("transform", "translate(" + 300/2 + "," + 300/2 + ")"); 
 
    var arc = d3.svg.arc() 
 
/*************************************************/ 
 
/* This only works in the latest version (3.5.5) */ 
 
    .cornerRadius(20) 
 
/*************************************************/ 
 
    .innerRadius(100) 
 
    .outerRadius(140) 
 
    .startAngle(0) 
 
    .endAngle(theta * (Math.PI)/180) 
 
    svg.append("path") 
 
    .attr('d', arc) 
 
}(240));
<!-- Import the latest version of d3 directly: --> 
 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
<div id="pieChart"></div>

+0

現在沒有顯示 – reggie

+1

@reggie現在應該好了 –

3

如果添加了行程,那麼你可以在行程適當設置的屬性來呈現圓角 - 這裏是粗略的想法:

(function() 
{ 
    var svg = d3.select('#pieChart').append("svg:svg").attr('width', 300).attr('height', 300).append("g").attr("transform", "translate(" + 300/2 + "," + 300/2 + ")"); 
    var arc = d3.svg.arc().innerRadius(100).outerRadius(100).startAngle(0).endAngle(190 * (Math.PI)/180); 
    svg.append("path").attr('stroke-width','60px').attr('stroke-linejoin','round').attr('d', arc).attr('fill', '#123456').attr('stroke','#123456'); 
}()); 

Demo fiddle here

相關問題