d3 v4：回転した要素の位置を見つける方法は？

Question

私は円の周りに等間隔で配置しているドットの束を持っています。私は、cxとcyの属性を初期位置に設定してから、各ドットを繰り返して、transform(rotate)を与えて、その位置に移動します。

var dot = dotPlaces.append("circle") 
        .attr("cx", dotOriginX) 
        .attr("cy", dotOriginY) 
        .attr("r", 20/2) 
        .attr("opacity", 1) 
        .attr("id", function(d) { return d.name; }) 
        .attr('fill', function(d) { 
         return color(d.type); 
        }) 
        .attr("transform", function(d,i) { 
         return "rotate("+ (i * (360/actualData.length)) +"," + originX + "," + originY + ")"; 
        }) 
        .attr("stroke", "white"); 

コードの後半でこれらの点に線を描きたいときに問題が発生します。 cx/cyアトリビュートかそのバウンディングボックスを取得したかどうかは、常に元の変換前の位置を参照します。私は彼らのポストトランスポジション位置が必要です。どうやらd3 v3にはtransformコールがありましたが、v4ではこれがなくなりました。私はローテーションを使用しているので、簡単な変換ではありません。これはxとyのオフセットをいくつか追加するだけのことではありません。

これは私が参考のために、今使っているものです：

var x = svg2.select("#"+key).node().getAttribute("cx"); 
var y = svg2.select("#"+key).node().getAttribute("cy"); 
//alternatively node().getBBox(); which also fails to give post-transform position. 

Answer 1

限り、あなたは唯一の<svg>要素に対する位置を把握する（または、nearest viewport elementに、正確には）必要があるとして、 SVGインタフェース.getCTM()を使用することができます。変換マトリックスを取得し、cx/cy属性に適用することができます。

var circle = d3.select('circle'); 
 
var cx = circle.attr('cx'); 
 
var cy = circle.attr('cy'); 
 
var ctm = circle.node().getCTM(); 
 
var x = cx * ctm.a + cy * ctm.c + ctm.e; 
 
var y = cx * ctm.b + cy * ctm.d + ctm.f; 
 
d3.select('p').text(x + ',' + y);

<script src="https://d3js.org/d3-selection.v1.min.js"></script> 
 
<svg width="200" height="100"> 
 
    <circle cx="30" cy="30" r="10" transform="rotate(90 100 100)" /> 
 
</svg> 
 
<p></p>