d3.js - 2つの変形されたsvg要素を結ぶ線

Question

ループ内の大きな円の周囲に配置された小さな円の配列を作成しました。繰り返しのたびに同じドットを回転させます。cxとcy別の角度でtransform=rotate(i*angle,0,0)を使用します。

は、今私は、ドットの2間の回線を接続したいのですが、各ドットが動作していないようcxと座標として2つのドットのcyを渡すのと同じcxとcy、私の素朴な方法を持っているので、 。不思議なJSFiddle上

は、ラインの半分が、示されているにもかかわらず、ラインのX0 == x1とY0 == Y1：良い方法Iので、変換SVG要素の座標を取得するのは何 https://jsfiddle.net/8wn30vqn/1/

それらを行に渡すことができますか？または、2つの要素を1つの線で接続できる他の方法がありますか？

Answer 1

あなたの小さな円のそれぞれから変換マトリックスを取り出し、それを同じポイントに適用して新しいポイントを取得してから、これらの新しいポイントを接続することをお勧めします。

var svgNode = d3circle.node(); 
var matrix = svgNode.transform.baseVal.consolidate().matrix; 

var pt = svgNode.ownerSVGElement.createSVGPoint(); 
pt.x = 0; 
pt.y = 0; 
var transformedPoint = pt.matrixTransform(matrix); 
... use transformedPoint to create line