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>