D3弧の片側を丸くします

Question

私のデータ用にSVG <path>を生成するためにD3.jsの組み込み弧関数を使用しています。

.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は円弧全体（四隅すべて）の固定値になります。最も簡単な修正点は、各データポイントに対して2つのアークを追加することです.2つ目のアークはコーナーを埋めるだけです。

例、我々はこの素敵な丸い弧を持っていると言う：

 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>