3

When I use tipsy on my d3 force directed graph I have a problem: when I set the tipsy gravity to west, the tipsy begins at the upper left corner of my circle. How can I make it begin on the right side of my circle?

Here is the sample of the code I use in d3: 

var node = vis.selectAll("g.node")
    .data(json.nodes)
    .enter().append("svg:g");

node.append("svg:circle")
    .attr("r", function(d){return d.credits *5+"px";})
    .style("fill", "orange");

$('svg circle').tipsy({
    gravity: 'w',
    html: true,
    title: function() {
        var d = this.__data__,
            name = d.name;
        return name;
    }
});

Edit In this question: https://stackoverflow.com/a/10806220/1041692 they say the following:

You could try adding the tooltip to an svg:g that you overlay with the actual circle, but give zero width and height. Currently it's taking the bounding box and putting the tooltip at the edge. Playing around with tipsy's options might help as well.

But either I do it wrong or it doesn't work, it didn't solve my problem.

EDIT 2 This problem also depends on the browser, in chrome the tipsy element is attached on the top left corner of the circle whereas I would like it to be attached on the middle of the right side of the circle. In Firefox, the tipsy appears on the top left of the whole webpage.

Community
  • 1
  • 1
Christopher Chiche
  • 14,409
  • 9
  • 55
  • 94
  • could you create a jsfiddle? makes it easier for us to help – zemirco Oct 01 '12 at 08:34
  • Can you elaborate? Right now it starts in the upper left corner and continues left or continues right? And you want it to begin on the right side of the circle (center I presume?) and continue right? – mbeasley Oct 01 '12 at 12:28
  • Exactly, right now it starts in the upper left corner and continues right. I would like it to start on the right side of the circle (center) and to continue right. – Christopher Chiche Oct 01 '12 at 13:01

1 Answers1

3

The D3 tipsy tutorial actually uses a modified version of tipsy:

http://bl.ocks.org/1373263

It is slightly tweaked to correctly calculate bounding boxes of SVG elements. So copy that source code, rather than using tipsy downloaded from the tipsy site.

user1580492
  • 141
  • 5