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

Question

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

现在我想在两个点之间连接一条线，但由于每个点都有相同的cx和cy，我的天真传递方式是cx和{{坐标中的两个点似乎没有效果。

奇怪的是，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