D3圓弧的一側

Question

我正在使用D3.js的內置圓弧函數爲我的數據生成SVG <path>。

.attr("d", function(element, index) { 

    var arc = d3.arc() 
     .innerRadius(iR) 
     .outerRadius(iR + 10) 
     .startAngle(element[1]) 
     .endAngle(element[2]) 
     .cornerRadius(isRounded ? cR : 0); 

    return arc(); 

}); 

這個效果很好，但我想繞一定弧度的一邊（兩個角）。然而，當角落半徑由.cornerRadius()提供時，它將四個角落四捨五入。

我知道有variousways選擇性地輪矩形角落，但我希望有一些通用的方法來爲圓弧做到這一點。

我也看到this question關於四捨五入圓角的一些角落，但它沒有答案（並且D3 v4自從發佈以來已經出來）。

Answer 1

即使有v4 API，仍然沒有直接的方法來做到這一點。查看源代碼，cornerRadius成爲計算整個弧（所有4個角）的固定值。最簡單的解決方法是在每個數據點附加兩條弧線，第二條弧線僅填充角點。

例如，假設我們有這個很好的圓潤弧線：

 var myArcs = [ 
 
     [0, 45], 
 
     [180, 300] 
 
     ]; 
 

 
     var vis = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 400) 
 
     .attr('height', 400); 
 

 
     var arc = d3.arc() 
 
     .innerRadius(80) 
 
     .outerRadius(150) 
 

 
     var someArcs = vis.selectAll('path') 
 
     .data(myArcs) 
 
     .enter(); 
 

 
     someArcs 
 
     .append("path") 
 
     .attr("transform", "translate(200,200)") 
 
     .attr("d", function(d) { 
 
      arc.startAngle(d[0] * (Math.PI/180)) 
 
      .endAngle(d[1] * (Math.PI/180)) 
 
      .cornerRadius(20); 
 
      return arc(); 
 
     }) 
 
     .attr("fill", function(d, i) { 
 
      return d3.schemeCategory10[i]; 
 
     });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

我的解決將是這樣的：

var myArcs = [ 
 
     [0, 45], 
 
     [180, 300] 
 
    ]; 
 

 
    var vis = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 400) 
 
     .attr('height', 400); 
 

 
    var arc = d3.arc() 
 
     .innerRadius(80) 
 
     .outerRadius(150) 
 

 
    var someArcs = vis.selectAll('path') 
 
     .data(myArcs) 
 
     .enter(); 
 

 
    someArcs 
 
     .append("path") 
 
     .attr("transform", "translate(200,200)") 
 
     .attr("d", function(d) { 
 
     arc.startAngle(d[0] * (Math.PI/180)) 
 
      .endAngle(d[1] * (Math.PI/180)) 
 
      .cornerRadius(20); 
 
     return arc(); 
 
     }) 
 
     .attr("fill", function(d, i) { 
 
     return d3.schemeCategory10[i]; 
 
     }); 
 

 
    someArcs 
 
     .append("path") 
 
     .attr("transform", "translate(200,200)") 
 
     .attr("d", function(d) { 
 
     arc.startAngle(d[0] * (Math.PI/180)) 
 
      .endAngle((d[0] + 10) * (Math.PI/180)) 
 
      .cornerRadius(0); 
 
     return arc(); 
 
     }) 
 
     .attr("fill", function(d, i) { 
 
     return d3.schemeCategory10[i]; 
 
     });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>