jquery tipsy tooltip不能与d3.js的圈子 [英] jquery tipsy tooltip not working with d3.js circles

问题描述

这是我的d3.js代码

  var circles = vis.selectAll（circle）。data（data） 
 circle 
 .enter（）
 .append（svg：circle）
 .attr（stroke，black）
 .attr ，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;} ）
  

最后，我已经附加了一个工具提示到圈子。我试图附加jquery tipsy工具提示这是我怎么做的（我遵循 http://bl.ocks.org/1373263 ）

  var circles = vis.selectAll（circle）。data（data）
 circle 
 .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; 
} 
} 
  

但它不工作。

data

  $（'svg circle'）。tipsy（{
 gravity：'w'，
 html：true，
 title：function（d）{
 var d = this .__ data__; 
 return d.corpus; 
} 
}）; 
  

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.

解决方案

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不能与d3.js的圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！