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

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

现在，我想在两个点之间连接一条线，但是由于每个点都具有相同的cx和cy，因此我以幼稚的方式将两个点的cx和cy传递为坐标的方式'似乎行得通。

奇怪的是，在JSFiddle上，即使行的x0 == x1和y0 == y1，也只显示了一半的行：https://jsfiddle.net/8wn30vqn/1/

获取转换后的svg元素的坐标的一种好方法是什么，这样我就可以将其传递给行了？还是我可以用一条线连接两个元素？

最佳答案

好的方法是从每个小圆圈中获取变换矩阵并将其应用于同一点以获取新点（然后连接这些新点）。

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

关于javascript - d3.js —连接两个转换后的svg元素的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40462457/