Question

在下面的代码我试图动态地将Tipsy工具提示映射到svg圈但我无法这样做，有人可以指出我在这里犯了什么错误？为每个数据添加.tipsy无效。

var config = {
  "avatar_size": 100
}

var body = d3.select("body");

var svg = body.append("svg")
  .attr("width", 500)
  .attr("height", 500);

var defs = svg.append('svg:defs');

data = [{
  posx: 100,
  posy: 100,
  img: "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png",
  description:"1"

}, {
  posx: 200,
  posy: 200,
  img: "https://cdn1.iconfinder.com/data/icons/social-media-set/24/Reverbnation-128.png",
  description:"2"
}, {
  posx: 300,
  posy: 300,
  img: "https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png",
    description:"3"
}]
data.forEach(function(d, i) {
  defs.append("svg:pattern")
    .attr("id", "grump_avatar" + i)
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", d.img)
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0);

  var circle = svg.append("circle")
    .attr("transform", "translate(" + d.posx + "," + d.posy + ")")
    .attr("cx", config.avatar_size / 2)
    .attr("cy", config.avatar_size / 2)
    .attr("r", config.avatar_size / 2)
    .style("fill", "#fff")
    .style("fill", "url(#grump_avatar" + i + ")");

    //this is not working
    $('circle').tipsy({ 
        gravity: 'w', 
        html: true, 
        title: d.description
      });

})

动态添加Tipsy Tooltip

0 个答案: