jquery tipsy tooltip not working with d3.js circles

Question

Here is my d3.js code

var circles = vis.selectAll("circle").data(data)
circles
    .enter()
        .append("svg:circle")
            .attr("stroke", "black")
            .attr("cx", function (d) { return xRange(d.year); })
            .attr("cy", function (d) { return yRange(d.count); })
            .style("fill", function(d,i){return color(i);})
        .append("svg:title")
            .text(function (d) { return d.corpus; })

In the end i have appended a tooltip to the circles.I tried to attach jquery tipsy tooltip to the circles but did'nt work.Here is how i did it(i followed http://bl.ocks.org/1373263)

var circles = vis.selectAll("circle").data(data)
circles
    .enter()
        .append("svg:circle")
            .attr("stroke", "black")
            .attr("cx", function (d) { return xRange(d.year); })
            .attr("cy", function (d) { return yRange(d.count); })
            .style("fill", function(d,i){return color(i);})
        $('svg circle').tipsy({ 
                            gravity: 'w', 
                            html: true, 
                            title: function (d) {
                            return d.corpus;
                          }
                       });

But its not working.

What error messages (if any) are you getting? Do you have a [JSFiddle](http://jsfiddle.net) we could look at? — ajtrichards, Nov 26 '12 at 16:20
@socialrel8 here is the jsfiddle http://jsfiddle.net/RPGPL/3/ without the tooltip.Can u let me know how to add jquery tipsy tooltip to it — iJade, Nov 26 '12 at 16:46
I just compared the code in this question to the sample you have pointed out. This is how it is done in the example : $('svg circle').tipsy({ gravity: 'w', html: true, title: function () { var d = this.__data__, c = colors(d.i); return d.corpus; } }); — TJ-, Nov 26 '12 at 16:49

score 1 · Answer 1 · answered May 10 '13 at 07:38

You are missing this.data

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

jquery tipsy tooltip not working with d3.js circles

1 Answers1

Linked