javascript - 使用 d3 将 Tipsy 工具提示附加在圆圈的左上角

Question

当我在我的 d3 力导向图上使用醉酒时，我遇到了一个问题:当我将醉酒重力设置为西时，醉酒从我的圆圈的左上角开始。我怎样才能让它从我的圈子的右侧开始？

这是我在 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;
    }
});

编辑 在这个问题中:https://stackoverflow.com/a/10806220/1041692他们说:

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.

但是要么我做错了，要么不起作用，都没有解决我的问题。

EDIT 2 这个问题也取决于浏览器，在 chrome 中，tipsy 元素附加在圆圈的左上角，而我希望它附加在右侧的中间的圈子。在 Firefox 中，tipsy 出现在整个网页的左上角。

Answer 1

D3 tipsy 教程实际上使用了 tipsy 的修改版本:

http://bl.ocks.org/1373263

稍微调整以正确计算 SVG 元素的边界框。因此，复制该源代码，而不是使用从 tipsy 站点下载的 tipsy。