Bend SVG`<g>`around Curve

Question

我使用D3.js以直線繪製一些SVG <path> s。所有這些元素都包含在<g>中，具有相同的垂直轉換。

我想「包裝」圍繞一個圓弧這些元素。最後，每個矩形應該成爲弧的一小段，而垂直線將指向該圓的中心。

我意識到，我可能可以從一開始就以圓弧的形式做到這一點：例如，畫出厚的圓片段，而不是矩形。然而，這聽起來像是很多數學和計算，特別是對於SVG新手來說。

有沒有辦法將這些元素變換到曲線事後，這意味着我可以用我有一個通過改變transform屬性也許矩形，繪製這些代碼？如果有一個外部的SVG庫（儘管我看起來沒有成功），我也會考慮使用它。

Answer 1

比使用路徑弧命令更容易A - 雖然不是我所希望的，因爲它不能變形排列在一個圓周上的線條上的元素 - 我發現d3.arc()（以前的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(); 

    }); 

謝謝，Bill。