Round One Side de D3 Arc

Question

J'utilise la fonction d'arc intégrée de D3.js pour générer des SVG <path> s pour mes données.

.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(); 

}); 

Cela fonctionne parfaitement, mais je voudrais arrondir un côté (les deux coins) de certains arcs. Lorsqu'un rayon de coin est fourni avec .cornerRadius(), cependant, il arrondit les quatre coins.

Je sais qu'il ya variousways sélectivement arrondir les angles des rectangles , mais j'espère qu'il ya une certaine façon générique pour le faire pour les arcs.

J'ai aussi vu this question sur arrondir seulement quelques coins d'un arc, mais il n'a pas de réponse (et D3 v4 est sorti depuis qu'il a été posté).

Answer 1

Même avec l'API v4, il n'existe toujours pas de moyen simple de le faire. En regardant le code source, le coinRadius devient une valeur fixe pour le calcul de l'arc entier (tous les 4 coins). La solution la plus simple consiste à ajouter deux arcs pour chaque point de données, le deuxième arc remplissant simplement les coins.

exemple, disons que nous avons ce arcs bien arrondis:

 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>

Mon solution ressemblerait à ceci:

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>