Courbe SVG `<g>` autour Courbe

Question

J'utilise D3.js pour dessiner quelques SVG <path> s en ligne droite. Tous ces éléments sont contenus dans un <g> avec la même transformation verticale.

Je voudrais "envelopper" ces éléments autour d'un arc de cercle. À la fin, chaque rectangle devrait devenir un petit segment de l'arc et les lignes verticales pointeront vers le centre du cercle.

Je réalise que je pourrais probablement le faire dans un arc depuis le début: dessiner des segments de cercle épais de bout en bout au lieu de rectangles, par exemple. Cela, cependant, semble beaucoup de mathématiques et de calcul, en particulier pour quelqu'un de nouveau à SVG.

Est-il possible de transformer ces éléments sur une courbe post hoc, ce qui signifie que je pourrais utiliser le code je qui dessine ces rectangles, peut-être en changeant l'attribut transform? S'il y a une bibliothèque SVG externe (bien que j'ai regardé sans succès), je considérerais également l'utilisation de cela.

Answer 1

facile que d'utiliser la commande d'arc de chemin A -Bien pas tout à fait ce que j'espérais en ce qu'elle ne peut pas se transformer éléments disposés en ligne autour d'un cercle-je ai trouvé d3.arc() (anciennement d3.svg.arc()).

canvas.selectAll(".xContainer") 
    .selectAll("path") 
    .data(...) 
    .enter() 
    .append("path") 
    .attr("fill", function(element, index) { return colorForSize(element[4]); }) 
    .attr("d", function(element, index) { 

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

     return arc(); 

    }); 

Merci, Bill.