Bend SVG `<g>` wokół Curve

Question

Używam D3.js do rysowania niektórych SVG <path> s w linii prostej. Wszystkie te elementy są zawarte w <g> z tą samą transformacją pionową.

Chciałbym "wrap" te elementy wokół okrągłego łuku. Na końcu każdy prostokąt powinien stać się małym segmentem łuku, a pionowe linie będą wskazywać na środek okręgu.

Zdaję sobie sprawę, że prawdopodobnie mógłbym zrobić to od początku w łuku: na przykład rysując grube kółka, od końca do końca, zamiast prostokąta. To jednak brzmi jak dużo matematyki i obliczeń, szczególnie dla kogoś nowego w SVG.

Czy istnieje sposób na przekształcenie tych elementów na krzywą po hoc, co oznacza, że ​​mogę użyć kodu, który mam, który rysuje te prostokąty - może zmieniając atrybut transform? Jeśli istnieje zewnętrzna biblioteka SVG (chociaż wyglądałem bez powodzenia), rozważałbym również użycie tej.

Answer 1

łatwiejsze niż przy użyciu polecenia łuku ścieżka A -though niekoniecznie co miałem nadzieję, że to nie może morph elementów ułożonych w jednej linii po okręgu-znalazłem d3.arc() (dawniej 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(); 

    }); 

Dzięki, Bill.