0

SVG を出力する Gephi で作成したネットワーク グラフに対話機能を追加しようとしています。ノードを SVG 円として入力するのが好きな Raphael テンプレートを使用しています。問題は、私の 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 に答える