湾曲SVG `<g>`カーブ

Question

私はD3.jsを使ってSVG <path>を直線で描画しています。これらの要素はすべて同じ垂直変換で<g>に含まれています。

私は円弧の周りにこれらの要素を「ラップ」したいと思います。最後に、各矩形は円弧の小さなセグメントになり、垂直線は円の中心を指します。

私はおそらく、最初から弧でこれを行うことができることを理解しています。たとえば、長方形の代わりに太い円の部分を端から端まで描きます。しかし、これは数学や計算のように思えます。特にSVGを初めて使う人にとっては、そうです。

は私がtransform属性を変更することにより、これらの矩形-多分描く私が持っているコードを使用することができます意味事後曲線上にこれらの要素を変換する方法は、ありますか？外部SVGライブラリがある場合（私は成功していないと見ていますが）、私もそれを使用することを検討したいと思います。

Answer 1

私はそれが周りに一列に配置要素モーフィングすることができないという点で、期待していたではない非常に何-thoughパスアークコマンドAを使用するよりも簡単円を-I（以前d3.svg.arc()）d3.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