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

标签 javascript d3.js svg

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

现在我想在两个点之间连接一条线,但由于每个点都有相同的 cxcy,我简单的传入 的方式>cxcy 两个点作为坐标似乎不起作用。

奇怪的是,在 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/

相关文章:

javascript - 双击 td 时如何在警告框中将数据库中的数据显示为 html 表

javascript - Angular 2下拉菜单第一个选项没有出现

javascript - 如何仅在特定页面中删除页脚组件?

javascript - Webpack - 应用程序文件夹外部的文件夹访问

javascript - d3.js + React,node.getBoundingClientRect 不是函数

google-chrome - SVG 无法在 Chrome 84 中的初始页面加载时呈现

javascript - dc.js 中的多系列折线图

javascript - 为什么 D3 无法正确渲染 TopoJSON?

javascript - 如何使用 jQuery 使 SVG 对象可点击并滚动到 anchor ?

svg - 沿着 d3 路径移动一个圆圈,以不同的速度动画