Viraj SVG `<g>` etrafında Curve

Question

Bazı SVG <path> s düz bir çizgi çizmek için D3.js kullanıyorum. Tüm bu elemanlar aynı dikey dönüşüme sahip <g>'da bulunur.

Ben bir daire yayı etrafında bu öğeleri "wrap" istiyorum. Sonunda, her bir dikdörtgen arkın küçük bir parçası olmalı ve dikey çizgiler dairenin merkezine işaret edecektir.

Muhtemelen bunu baştan itibaren bir yay içinde yapabileceğimi fark ettim: örneğin, dikdörtgen daire yerine uçtan uca kalın daire bölümleri çizme. Ancak bu, özellikle SVG'ye yeni biri için çok fazla matematik ve hesaplama gibi görünüyor.

bir eğrinin üzerine bu öğeleri dönüştürmek için bir yolu var mı Post Hoc, ben transform niteliğini değiştirerek belki dikdörtgenler-bu çizer hangi sahip kodu kullanabilirsiniz anlamı? Eğer harici bir SVG kütüphanesi varsa (hiç başarıya bakmasam da), bunu kullanmayı da düşünürdüm.

Answer 1

Ben bir etrafında bir çizgide düzenlenmiş elemanlar Morph olamayacağını içinde umuyordum değil tamamen ne topluluk olsalar yol ark komutunu A kullanmaktan daha kolay daire-ı (eski d3.svg.arc()) d3.arc() bulundu.

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

    }); 

Teşekkürler, Bill.