0

我正在尝试向我在 Gephi 中制作的输出 SVG 的网络图添加交互性。我正在使用一个 Raphael 模板，该模板喜欢将我的节点输入为 SVG 圆圈。问题是我来自 Gephi 的 SVG 圆圈实际上是贝塞尔曲线。例如：

<path fill="#D52A2A" d="M663.395,426.958c0-2.869-2.324-5.194-5.193-5.194s-5.191,2.325-5.191,5.194
c0,2.867,2.322,5.189,5.191,5.189C661.069,432.148,663.395,429.826,663.395,426.958"/>

有没有办法将这样的路径转换为具有 x、y 和半径的标准 SVG 圆形元素？

4

1 回答 1

1

您可以分析路径，但如果您知道哪些路径是从圆圈开始的，那么您可以像这样进行快速近似：

var p = document.querySelector("path");
var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
var b = p.getBBox();
c.cx.baseVal.value = b.x + b.width/2;
c.cy.baseVal.value = b.y + b.height/2;
c.r.baseVal.value = b.width/2; // assuming width and height are the same
p.parentNode.appendChild(c);

提示您的路径是一个圆圈可能是 bbox 的宽度和高度非常接近相等，或者路径 'd' 属性 gephi 输出对圆圈始终使用相同的形式（不确定是否是这种情况）。

Gephi 是开源的，所以另一种选择是让它输出你想要开始的东西。

更新： 这是一个显示这个的 jsfiddle。

于 2012-06-14T09:10:44.087 回答