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>