How can I access the paper object created by raphael?

Question

I'm working on an HTML display for some phylogenetic analysis. I create a div, and there's this lovely javascript package called jsPhyloSVG that draws me a nice tree in that div. That package uses raphael to do its drawing, but it doesn't return me the raphael paper object. I'd like to make a few additions to this image using raphael, but I don't know how because I don't have a reference to that paper object. I can access the svg that raphael generates, but is there some way to work backwards to find paper?

If that doesn't work, I could always just add circle or path objects directly to the svg using jquery, right?

I'm not sure you can reuse an svg/paper used by another element with Raph, as it doesn't support all the svg elements. You could certainly do it with Snap.svg, Raphs younger sister if needed though, which has a lot of the same functionality. There you would use Snap('#myElementId') — Ian, Jan 08 '16 at 07:50

score 1 · Accepted Answer · edited May 01 '18 at 13:50

Well, after most of a day smashing my head into a wall, I've solved my issue. It turns out you can reuse the paper object that has been created by some other library, if you can find a reference to the object itself. For anyone else that is using jsPhyloSVG, this can be found by:

var dataObject = {phyloxml: tree_data};
var phylocanvas = new Smits.PhyloCanvas(
  dataObject,
  'svgCanvas',
  1000, 1000,
  'circular'
);
var paper = phylocanvas.getSvg().svg;

You can then proceed as normal: paper.circle(100, 100, 15);.

What I think Ian was getting at, is that you cannot reuse the svg that has been created by raphael. I could always access that element, but using jQuery to append circle elements didn't work.

They would show up in the svg object in the inspection panel, but would not display on the screen. There are a few workarounds discussed in another question here, which mostly worked for me. However they broke the connection between the raphael object and the svg element on screen; most mouseover functionality stops working.

How can I access the paper object created by raphael?

1 Answers1