0

I'm trying to add interactivity to a network graph I made in Gephi, which outputs SVG. I'm using a Raphael template that likes my nodes to be inputted as SVG circles. The problem is that my SVG circles from Gephi are actually bezier curves. For example:

<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"/>

Is there any way to convert a path like this to a standard SVG circle element with an x, y, and radius?

mhkeller
  • 713
  • 1
  • 8
  • 19

1 Answers1

1

You could analyze the paths, but it's easier if you know which paths are circles to begin with, then you could do a quick approximation like this:

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);

Hints that your path is a circle might be that the bbox width and height are very close to equal, or that the path 'd' attribute gephi outputs uses the same form always for circles (not sure if that's the case).

Gephi is opensource, so another option is to look at making it output what you want to begin with.

Update: here's a jsfiddle showing this.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • That makes sense. Just a basic question on how to get the parser working. How are you loading in the svg file for the selector document.querySelector("path") to run? Could you do something like $.ajax through jquery and replace "document" with "data"? Or load it as a variable as in the Raphael Tiger example [link](http://raphaeljs.com/tiger.html) and select the variable? – mhkeller Jun 14 '12 at 16:07