d3.js - 连接两个转换后的svg元素的线

Question

我在一个循环中创建了一个放置在大圆圈圆周上的小圆圈（点）数组，每次迭代我旋转同一个圆点cx和cy以不同的角度使用transform=rotate(i*angle,0,0)。

现在我想连接两个点之间的线，但由于各点的cx和两个点作为坐标cy传球似乎并不相同的工作cx和cy，我天真的方式。

奇怪上的jsfiddle，在半年线所示，即使线的X0 == x1和Y0 == Y1：https://jsfiddle.net/8wn30vqn/1/

什么是一个很好的方式获得转化SVG元素的坐标，所以我的可以通过他们进入线？或者还有其他方式可以用一条线连接两个元素吗？

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