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

Question

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

现在我想在两个点之间连接一条线，但由于每个点都有相同的 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