TootTip問題與d3.js圖表​​

Question

我想toottip添加到我的D3圖表，但我不能做so..Any幫助將不勝感激..

程序代碼：

var w = 300; 
    var h = 250; 
    var r = h/2; 
    var color = d3.scale.category20c(); 
    var data = [{ "label": "1", "value": 64 }, 
         { "label": "2", "value": 1 }, 
         { "label": "3", "value": 19 }, 
         { "label": "4", "value": 17 }, 
         { "label": "5", "value": 1 }]; 
    var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function (d) { 
      return "<strong>Frequency:</strong> <span style='color:red'>" + d.label + "</span>"; 
     }); 
    var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); 
    var pie = d3.layout.pie().value(function (d) { return d.value; });   
    var arc = d3.svg.arc().outerRadius(r);  
    var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice").on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 
    arcs.append("svg:path") 
     .attr("fill", function (d, i) { 
      return color(i); 
     }) 
     .attr("d", function (d) { 

      console.log(arc(d)); 
      return arc(d); 
     }); 


    arcs.append("svg:text").attr("transform", function (d) { 
     d.innerRadius = 0; 
     d.outerRadius = r; 
     return "translate(" + arc.centroid(d) + ")"; 
    }).attr("text-anchor", "middle").text(function (d, i) { 
     return data[i].label; 
    } 
      ); 

Answer 1

你必須打電話給svg的提示。您缺少以下代碼。

vis.call(tip); 

檢查文檔https://github.com/Caged/d3-tip